常见 plugin
-
mini-css-extract-plugin（将 CSS 提取到单独的文件中，限生产环境，开发环境建议使用style-loader；v2 版本需结合 webpack 5 使用） -
optimize-css-assets-webpack-plugin（压缩 css，webpack 5 使用css-minimizer-webpack-plugin） html-webpack-plugin-
clean-webpack-plugin（每次执行构建时清除 dist 目录，升级到 webpack 5.20 后可通过配置开启，不再需要该 plugin） -
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-coreis the main babel package — We need this for babel to do any transformations on our code. -
babel-cliallows 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可在独立进程中开启类型检查
三种哈希值
-
hash：跟整个项目的构建相关，构建生成的文件hash值都是一样的，只要项目里有文件更改，整个项目构建的hash值都会更改。 -
chunkhash：根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的hash值。 -
contenthash：由文件内容产生的hash值，内容不同产生的contenthash值也不一样。
