什么是Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
为什么使用Webpack
- 打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。
- 转换：把拓展语言转换成为普通的JavaScript，让浏览器顺利运行。
- 优化：前端变的越来越复杂后，性能也会遇到问题，而WebPack也开始肩负起了优化和提升性能的责任。
安装
必须先安装node.js，可以通过 node -v来查看node安装情况和版本，如果没有安装，要先安装node才可以继续进行。
# 初始化npm
npm init
# 通过npm安装webpack
npm install webpack --save-dev
简单入门
1、新建hello.js
function hello(str) {
alert(str);
}
2、使用webpack打包
# 要打包的文件 打包后文件的名称
webpack hello.js hello.bundle.js
3、新建world.js文件
require('./hello.js')
function world() {
return {
}
}
hello('hello world');
4、新建style.css文件
html, body {
padding: 0;
margin: 0;
}
在world.js引用：
// 经过css-loader处理
require('css-loader!./style.css')
或者通过命令行实现，require(‘./style.css’)
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader'
需要安装css-loader
npm install css-loader style-loader --save-dev
5、新建index.html文件
<html>
<head>
<meta charset="utf-8">
<title>webpack</title>
</head>
<body>
<script type="text/javascript" src="world.bundle.js">
</script>
</body>
</html>
6、自动打包
使用webpack --watch命令，可实现文件修改时，自动打包。
webpack配置文件
webpack.config.js文件：
module.exports = {
// 打包入口
entry: './src/script/main.js',
output: {
path: './dist/js',
filename: 'bundle.js'
}
}
直接用webpack命令打包即可。
如果配置文件名称改动，则通过webpack --config webpack.dev.config.js命令来打包。
高级使用
module.exports = {
// 打包入口
entry: {
bundle: ["babel-polyfill", path.resolve("src/index.jsx")],
vendor: ['react', 'react-dom']
},
output: {
path: "./static",
filename: "[name].[hash:8].js",
}
}
打包后会产生两个文件：bundle.4544dfe3.js和vendor.4544dfe3.js
package.json文件
通过修改package.json文件，可以配置运行命令。
"scripts": {
"webpack": "webpack --progress --color --config webpack.prod.config.js"
}
运行：
npm run webpack
html-webpack-plugin介绍
可以自动生成HTML，这样自动生成的js文件可以动态添加到HTML文件里。
安装html-webpack-plugin：
npm install html-webpack-plugin --save-dev
在webpack.config.js使用：
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new HtmlWebpackPlugin({
title: '监管平台',// 标题
favicon: path.resolve("./src/static/images/favicon.ico"),
template: './src/index.html', // 模板文件
inject: 'head',//引用放在head标签里
minify: {//压缩文件
removeComments: true,//删除注释
collapseWhitespace: true//删除空格
},
filename: './index.html' // 产出后的文件名称
})
]
}
打包：
npm run webpack