webpack 学习笔记

entry:打包的入口文件
output:如何将编译后的文件输出到磁盘
Loaders: 支持其它文件类型并且把它们转化成有效的模块，并且可以添加到依赖图中
- - babel-loader 解析ES6
- style-loader,css-loader,less-loader 解析css
- file-loader 解析图片或字体
- url-loader 解析图片，可带limit参数转换成base64
Plugins: 用于 bundle ⽂文件的优化，资源管理理和环境变量量注⼊入,作⽤用于整个构建过程.
Mode: 构建环境是:production、development 还是 none
文件监听：webpack --watch.build编译好的文件会自动更新。

文件指纹：
- hash 字体和图片
- Chunkhash:js(和 webpack 打包的 chunk 有关，不不同的 entry 会⽣生成不不同的 chunkhash 值)
- contenthash:css
代码压缩：
- js:内置unglify-webpack-plugin
- css:optimize-css-assets-webpack-plugin和cssnano.由于是单独生成css，需要删除style-loader(这个是用来生成css插入header标签的)
- html:html-webpack-plugin

自动清理构建目录：使用clean-webpack-plugin
自动补齐CSS3前缀：PostCSS 插件 autoprefixer
CSS3的px和rem转换：使用 px2rem-loader，自动计算根元素font-size:lib-flexible
html,js资源内联：
- 例如 ${require('raw-loader!babel-loader!../node_modules/lib-flexible')}
css资源内联：
多页面打包：
source map:构建完成时，是否可以通过map调试源码，而非打包后的代码。配置devtool:'source-map'
分离公共资源：
- 基础库分离：使用html-webpack- externals-plugin用cdn方式替换
- 公共脚本分离：使用SplitChunksPlugin(webpack 4内置，替代CommonsChunkPlugin),也可以分离基础库cdn
tree shaking:ES6语法（import ...)静态分析，没有被用到的代码，不打包。
scope hoisting：使用ES6语法，减少webpack打包产生的闭包。
JS懒加载：使用插件 npm install @babel/plugin-syntax-dynamic-import --save-dev
ESLint：发现代码错误，保证团队风格
webpack打包库和组件：
- 支持 AMD/CJS/ESM 模块引⼊
- library: 指定库的全局变量量
- libraryTarget: 支持库引入的⽅式
- npm publish 打包上传。
ssr服务端渲染：服务端生成html模板,css，data数据，直接返回客户端。减少请求次数，提升seo.
优化日志：stats:errors-only + friendly-errors-webpack-plugin插件
错误日期的捕获和中断：
- echo $? 查看错误码
- webpack4 和 3 写法不一样
- *

package.json 中使用 stats
速度分析： speed-measure-webpack-plugin
体积分析： webpack-bundle-analyzer
使用高版本：node和webpack
多进程多线程：webpack4原生:thread-loader
并行压缩： terser-webpack-plugin 开启 parallel 参数
分包：分离基础库：html-webpack-externals- plugin
进一步分包：预编译资源模块：使用 DLLPlugin 进行分包，DllReferencePlugin 对 manifest.json 引用
使用缓存构建：
- babel-loader 开启缓存
- terser-webpack-plugin 开启缓存
- 使用 cache-loader 或者 hard-source-webpack-plugin
缩小构建目标：比如 babel-loader 不解析 node_modules
减少文件搜索范围