webpack5踩坑指南

序言

webpack5即将发布，打算趁发布前踩个坑，以前从alpha版本就有关注，本次重点更新在长期缓存，tree shakking和es6打包这块，具体更新日志能够参考官方。

更新日志

官方更新日志

• node版本更新为v10。
• webpack5默认采用es6代码进行输出，4是es5的(可经过设置output.ecmaVersion来使用es5进行打包，默认是采用es2015进行生成)。
• webpack <= 4带有许多node.js核心模块的polyfill，5去掉了这些模块，专一于与前端兼容的模块。
• 优化了打包后的文件大小
• 长期缓存（默认开启）
• 自定义json解析器
• 优化后的tree shakking (能够针对嵌套的模块进行分析，未使用将在生产模式删除)
• splitChunk和模块大小(能够针对js和css样式进行更细致的切割，并用于minSize和maxSize)
• 模块命名
• 编译器空闲并关闭(在node中使用wepback()结束后，须要手动调用compiler.close(), compiler是当前webpack实例)

环境准备

• node v10以上，官方最低8.9.0，我的v13.1.0
• webpack 5.0.0-beta.7
• webpack-cli 3.13.0

以上为我我的环境，仅供参考。

参考文章

• Webpack 5 升级实验

开始踩坑

打包对比

新建一个webpack.config.js，内容以下

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  }
}
// package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
复制代码

上图为webpack5打包后的结果，左边是开发环境，右边是生产环境。

这个是webpack4打包后的结果，左边开发环境，右边生产环境，webpack5相对4来讲，打包后的内容少了一丢丢，代码也采用了es6的语法，去掉了webpack4自带的polyfill，体积更小。

上图为4和5的时间对比，5的时间是175ms，4只有96ms，就速度来讲，仍是4比较有优点，具体缘由不明，可能和内部优化有关。

如今来安装html-webpack-plugin和webpack-dev-server,让配置支持热更新和html

npm i html-webpack-plugin webpack-dev-sever -D

// package.json的配置修改成
"dev": "webpack-dev-server --mode development"
复制代码

安装完成后配置变成修改为这样

而后，html-webpack-plugin给咱们带来了个惊喜(报错)，是否是很刺激，很意外。

说htmlWebpackPluginAlterChunks没法添加这个属性，通过大佬提醒，咱们能够经过安装最新版的html-webpack-plugin。

yarn add html-webpack-plugin@next -D
复制代码

安装完成后，从新启动咱们的webpack，发现问题已经解决，项目可继续运行。而后发现编译时间太长了，目前还仅仅只有个console和一个什么都没的html页面，咱们能够开启webpack的多线程，进行打包，安装terser-webpack-plugin便可，安装完后，配置以下

咱们加了一个optimization属性，用来写terserPlugin的配置，经过parallel这个属性，咱们能够进行多线程打包，默认是系统的线程数 - 1个，能够手动设置，支持布尔和数字，固然这个插件也能够作代码优化，混淆，去除console等，具体去看官方文档 terser-webpack-plugin。启动运行后发现，html-webpack-plugin又给咱们带来了一个报错，报错内容以下：

能够参考这个 issue， 通过一番查找，找到了缘由，咱们找到html-webpack-plugin下面的index.js把上面注释掉的那行换成下面的那一行，就能够成功运行了。

好像并没什么变化，试了几回，每次打包时间不固定，可能文件过小吧，优化并不明显。

tree shakking

webpack5的结果

webpack4的结果

5直接把模块里面的内容打印了出来，4把变量打印了出来，共同点是都去掉了未使用的b，官方解释是webpack如今能够针对导出的嵌套模块进行访问，从新导出对象时，能够改善tree shakking，感受应该是webpack在编译以前，提早对模块的依赖进行分析，而后作了预处理，而后编译时，把未使用的模块直接删掉。深刻的就不了解了。 webpack5还开启了optimization.innerGraph，默认在生产模式启动，该选项能够针对模块的符号进行分析，从而找出导入和导入的依赖关系，相对来讲，webpack4并无这个功能。 能够针对如下内容进行分析：

• function
• class
• export default 或变量声明
• 局部变量
• 类和函数表达式

如今咱们又新加了如下代码

webpack5:

webpack4:

为了方便测试，我加了console.log('test')，从而更好看结果，结果很显然，5并没把test函数使用的其余部分打进去，而4把内容打了进去，webpack5在调用test函数的时候，去分析了固然的引用，从而去掉了未使用的something这个变量， 当设置optimization.sideEffects为false时，将会删除更多内容。

持久缓存

webpack5新增了持久缓存，可经过如下配置开启：

试了下，好像并没什么效果，可能我姿式不对

模块命名id得以肯定

上图分别为4和5的打包结果，在webpack4的时候，经过import()加载的模块将会生成下标以数字为标识的模块，webpack5修改了这一设置，改为模块命名，不须要手动经过import(webpackChunkName: "name")进行设置。

总结

webpack5更新的内容大概来讲就是这些，本次踩坑并没针对各类loader进行测试，整体来讲，webpack相对4来讲大小发生了质的变化，速度上来讲，仍是4更有优点，目前来看，至于正式版本就不清楚了。代码已经上传到github，若是有问题也能够加我Q: 2495713984。

地址：webpack5地址