1.管理输出
1.可以通过多入口，导出多个打包文件，[name]会根据入口名称进行设置。
filename: '[name].[contenthash].js',（这里的contenthash是一个唯一序列）
1.生成index.html: HtmlWebpackPlugin
2.清空dist文件夹： new CleanWebpackPlugin(),
2.前端监听/浏览器刷新
（1）可以在浏览器报错时提示具体出错位置devtool："inline-source-map"
（2）webpack --watch监听，但是不能即时更新浏览器
不清空dist中的index.html： new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
（3）webpack serve --open
devServer: {
contentBase: './dist',
hot: true （这里设置为true，则会启动HMR，但dist里是空的，打包的文件都是保存在内存中。但貌似不用配置，true/false都会HMR）
},
3.代码分离
（1）可以使用dependOn来分离出两个entry共同使用的依赖。
注意还需要配置
optimization: {
moduleIds: 'deterministic', （使module id不变，下面的vendors.hash.js文件名也会不变）
runtimeChunk: 'single',
splitChunks: { （分离出依赖文件）
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
会多一个打包的文件 runtime.bundle.js
（2）使用splitChunksPlugin来将共同的依赖，分别放到两个打包好的入口文件。
（3）使用import来动态引入，此时dist中会有专门的lodash的依赖包。
（4）可以通过下面的设置，来分离出node_modules依赖包。
4.缓存
浏览器会将dist中的文件缓存，但如果有修改，有可能会不能更新。
moduleIds: 'deterministic'
类似第三方依赖，一般不会改变的，不需要更新。
这个设置可以使module id不递增，第三方依赖包的打包文件就不会更新。
5.创建library
源代码，通过export function abc导出abc方法。
在配置文件output中，设置import的全局变量为webpackNumbers。
（1）外部化链接
externals: {
lodash: {
commonjs: 'lodash',
commonjs2: 'lodash',
amd: 'lodash',
root: '_',
},
},
（2）暴露library
library: 'webpackNumbers',
libraryTarget: 'umd',
（3）"main": "dist/webpack-numbers.js",
（4）"module": "src/index.js",
6.Tree Shaking
（1）随着rollup普及起来。
（2）package.json中配置sideeffects，如果为false代表无副作用，
1）使用ES2015，可以做tree shaking。
不能是commonJs，@babel/preset-env会默认将代码转为commonJs。
"sideEffects": [
"/.css",
"/.scss",
"./esnext/index.js",
"./esnext/configure.js"
],
2）css必须做tree shaking。
（3）mode='production'会自动压缩代码并做tree shaking。
