Webpack Q&A

常见 plugin

1. mini-css-extract-plugin（将 CSS 提取到单独的文件中，限生产环境，开发环境建议使用style-loader；v2 版本需结合 webpack 5 使用）
2. optimize-css-assets-webpack-plugin（压缩 css，webpack 5 使用 css-minimizer-webpack-plugin）
3. html-webpack-plugin
4. clean-webpack-plugin（每次执行构建时清除 dist 目录，升级到 webpack 5.20 后可通过配置开启，不再需要该 plugin）
5. uglifyjs-webpack-plugin（压缩 js，不再维护）

官方内置 plugin

• ProvidePlugin：自动加载模块，而不必到处 import 或 require
• DefinePlugin：定义全局变量

webpack 相关

npm install --save-dev webpack webpack-cli webpack-dev-server

css 相关 loader

style-loader
css-loader
autoprefixer
postcss-loader（配合autoprefixer使用，需在根目录配置 postcss.config.js并在package.json增加browserslist字段）

文件处理

url-loader不再维护
file-loader不再维护

构建提速

thread-loader
happypack 不再维护
hard-source-webpack-plugin 不再维护

babel 相关

@babel/core
@babel/cli
@babel/preset-env
@babel/preset-react
@babel/plugin-proposal-class-properties
@babel/plugin-proposal-decorators

• babel-core is the main babel package — We need this for babel to do any transformations on our code.
• babel-cli allows you to compile files from the command line.
• babel-preset-env 和 babel-preset-react 分别用于支持 ES6+ 和 JSX 语法
• babel-plugin-proposal-class-properties 和 babel-plugin-proposal-decorators 分别用于支持 class 属性简写和装饰器，目前皆处于草案阶段

webpack 4 里面使用了 terser-webpack-plugin 插件替代了之前一直使用的 uglifyjs-webpack-plugin 作为它的内置插件

其他

react-hot-loader
babel-loader
ts-loader 语言转化与类型检查，关闭类型检查，编译时长会缩短，借助fork-ts-checker-webpack-plugin可在独立进程中开启类型检查

三种哈希值

1. hash：跟整个项目的构建相关，构建生成的文件hash值都是一样的，只要项目里有文件更改，整个项目构建的hash值都会更改。
2. chunkhash：根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的hash值。
3. contenthash：由文件内容产生的hash值，内容不同产生的contenthash值也不一样。