webpack是一个优秀的静态模块打包工具，它可以递归地构建出依赖关系，将所有模块打包成一个或多个bundle。
webpack
1. 安装
要使用webpack需要安装：
npm install --save-dev webpack
如果使用4.+版本还需要安装：
npm install --save-dev webpack-cli
建议本地安装，本地安装完成后直接使用node_modules/.bin/webpack访问webpack程序。
2. 配置
webpack的配置使用js编写，默认名字为webpack.config.js。一个简单的配置如下：
var path = require('path');
module.exports = {
mode: 'development',
entry: './foo.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'foo.bundle.js'
}
};
任何一个配置文件必需的两个字段包括：
- 入口（entry），即webpack根据这个入口建立依赖关系；
- 输出（output），处理后的bundle。
模式（mode）告诉webpack如何优化。目前可以选择的有development、production，该参数也可以通过命令行传递：webpack --mode=production。开发和生产模式，webpack会对代码做不同的优化策略。
以上是一个单入口的例子，也可以写成:
entry: {
main: './path/to/my/entry/file.js'
}
webpack也支持多入口方式：
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
3. loader处理非js文件
webpack本身只能处理javascript文件，其他文件需要借助loader来处理，loader可以将其他类型文件转换为webpack能处理的模块。loader有两个字段test、use，test表示匹配哪些文件做转换，use表示使用哪个loader：
const path = require('path');
module.exports = {
...
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
例如，我们可以使用css-loader、style-loader和ts-loader处理css和typescript文件：
npm install --save-dev css-loader style-loader ts-loader
module.exports = {
module: {
rules: [
{ test: /\.css$/, use: ['css-loader', 'style-loader'] },
{ test: /\.ts$/, use: 'ts-loader' }
]
}
};
4. 插件
插件对于webpack很重要，webpack本身也是构建在插件上的。我们可以使用插件完成很多工作。
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
...
plugins: [
new HtmlWebpackPlugin({
title: 'test',
filename: 'index.html',
template: path.resolve(__dirname, 'src/index.html'),
inject: 'body'
}),
],
...
}
要使用一个插件，在webpack中new一个实例并传入参数即可。如上所示，使用html-webpack-plugin插件。
