webpack笔记总结

指定输入和输出文件后，lodash 生成bundle文件
loader可以 import的 css等文件编译成webpack能识别的js文件
HtmlWebpackPlugin插件可以 把分离的bundle文件自动插入 index.html入口文件中
clean-webpack-plugin 先把dist下的所有文件先清空，在执行代码生成
Manifest 记录着文件依赖和生成的追踪过程
devtool不同类型的source map可以追踪错误代码的位置和优化打包速度
webpack-dev-server指定访问目录dist后，能够实时重新加载 live reloading
HMR，热模块启动，webpack 内部插件，new webpack.HotModuleReplacementPlugin()
tree shaking，用于描述移除 JavaScript 上下文中的未引用代码(dead-code)，sideEffects指定文件后，代码构建生成时可以删除未被引用的方法函数等
代码压缩输出，"mode" 配置选项轻松切换到压缩输出，只需设置为 "production"或者使用UglifyJsPlugin 插件（一般在生产环境使用）
webpack-merge 可以合并公共配置文件（webpack.common.js）和不同环境下（webpack.dev.js，webpack.prod.js）的配置
process.env.NODE_ENV可以获得当前环境变量，用于判断
入口 chunks 之间包含重复的模块时可以用CommonsChunkPlugin 插件来移除重复的模块
CommonsChunkPlugin 插件将 lodash 分离到单独的 chunk，并且将其从 main bundle 中移除，减轻了大小
CommonsChunkPlugin 能够在每次修改后的构建结果中，将 webpack 的样板(boilerplate)和 manifest 提取出来
CommonsChunkPlugin 将第三方库(library)（例如 lodash 或 react）提取到单独的 vendor chunk 文件中
使用 HashedModuleIdsPlugin，推荐用于生产环境构建，可以有助于资源缓存，优化性能