8、webpack3 和 webpack4 的区别（必会）

砂糖橘 08-20 66

前言：

而今小伙伴们对“webpack rules”大体比较注重，我们都需要分析一些“webpack rules”的相关资讯。那么小编在网上搜集了一些对于“webpack rules””的相关资讯，希望你们能喜欢，你们快快来学习一下吧！

1、mode/–mode 参数，新增了 mode/--mode 参数来表示是开发还是生产（development/production）。

2、Production，侧重于打包后的文件大小，development 侧重于 goujiansud。

3、移除 loaders，必须使用 rules（在 3 版本的时候 loaders 和 rules 是共存的但是到 4 的时候只允许使用 rules。

4、移除了 CommonsChunkPlugin (提取公共代码)，用 optimization.splitChunks，optimization.runtimeChunk 来代替。

5、支持 es6 的方式导入 JSON 文件，并且可以过滤无用的代码

let jsonData = require('./data.json')

import jsonData from './data.json'

import { first } from './data.json' // 打包时只会把 first 相关的打进去。

6、升级 happypack 插件（happypack 可以进行多线程加速打包）ExtractTextwebpackPlugin 调整，建议选用新的 CSS 文件提取 kiii 插件 mini-css-extract-plugin，production 模式，增加 minimizer。