Webpack Q&A

常见 plugin

1. mini-css-extract-plugin（限生产环境，开发环境建议使用style-loader）
2. optimize-css-assets-webpack-plugin（压缩 css）
3. html-webpack-plugin
4. clean-webpack-plugin（每次执行构建时清除 dist 目录）
5. uglifyjs-webpack-plugin（压缩 js）

官方内置 plugin

• ProvidePlugin：自动加载模块，而不必到处 import 或 require

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字段）

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可在独立进程中开启类型检查

三种哈希值

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

构建提速

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