webpack Plugin常用 optimization splitChunks UglifyJsPlugin sourceMap

很多东西容易忘记，做个简单笔记

1、webpack loader 加载顺序 从后到前
例子 ['style-loader', 'css-loader','sass-loader'] 先sass最后style

2、常用插件对照
CopyWebpackPlugin 将单个文件或整个目录复制到构建目录
DefinePlugin 允许在编译时(compile time)配置的全局常量
MiniCssExtractPlugin （4.0以前 ExtractTextWebpackPlugin）从 bundle 中提取文本（CSS）到单独的文件
optimization 的 splitChunks （4.0之前 CommonsChunkPlugin）提取 chunks 之间共享的通用模块
OptimizeCSSAssetsPlugin （4.0后放在 optimization 中） css文件压缩
uglifyjs-webpack-plugin （4.0后放在 optimization 中） 插件用来缩小（压缩优化）js文件
script-ext-html-webpack-plugin 添加async，defer或module属性的<script>元素，甚至他们内联
filemanager-webpack-plugin 对应目录打成zip包
CompressionWebpackPlugin 把js压缩成 *.js.gz 压缩文件，需要服务器进行配置
webpack-bundle-analyzer 优化插件，可以看到每个文件的大小
HtmlWebpackPlugin webpack 打包用的html模版 如 index.html

以下三个合用
NamedModulesPlugin 定义打包出的js名
NamedChunksPlugin 定义打包出的js对应的Chunk
HashedModuleIdsPlugin 这是 NamedModulesPlugin 的进阶模块，它在其基础上对模块路径进行 MD5 摘要，不仅可以实现持久化缓存，同时还避免了它引起的两个问题（文件增大，路径泄露）。用 HashedModuleIdsPlugin 可以轻松地实现 chunkhash 的稳定化！

其他
3、vconsole-webpack-plugin 可以在移动端调试

4、去掉 console.log 
new UglifyJsPlugin({
	compress: {
		drop_console: !config.module.isTestPackage,// 删除所有的 `console` 语句
		warnings: false
	}
})

5、打包map文件
本地开发环境 cheap-module-source-map 执行快，测试环境用 source-map
devtool: cheap-module-source-map
new UglifyJsPlugin({  
    sourceMap: true
}),

参考网址
网址一
网址二
网址三
网址四
sourceMap 参考网址