Webpack 3.0 升级至 4.0 实战指南：依赖替换与配置重构

Webpack 3.0 升级 4.0 概述

本文介绍将 webpack 3.11 版本升级至 4.26 版本的具体操作流程。

为了提升项目的打包效率，我们在基于 webpack 3.11 的基础上进行了升级。自 webpack 4.0 发布以来，其零配置特性对项目默认的“打包”和“压缩”功能进行了深度优化。如果在项目初期直接采用 webpack 4.0 且不使用 vue-cli 的默认配置，可能会减少后续遇到的兼容性问题。

依赖包安装与升级

本节主要讲述依赖包的安装与升级过程。

在构建过程中，我们会发现部分依赖包有新版本替换或出现报错，需要逐步进行替换。如果希望一次性体验所有潜在问题，可以先将 webpack 和 webpack-cli 升级到对应版本。

需要更新的 devDependencies 配置如下：

"extract-text-webpack-plugin": "^4.0.0-beta.0"
"html-webpack-plugin": "^4.0.0-beta.14"
"mini-css-extract-plugin": "^0.9.0" (旧的optimize-css-assets-webpack不支持了)
"preload-webpack-plugin": "^3.0.0-beta.4"
"script-ext-html-webpack-plugin": "^2.1.3"
"vue-loader": "^15.3.0"
"webpack": "^4.26.1"
"webpack-cli": "^3.1.2"
"webpack-dev-server": "^3.2.1"
"script-ext-html-webpack-plugin": "^2.1.3"

常见报错与解决方案

3. 升级过程中遇到的问题及解决方案

升级 webpack 后，执行 build 命令时报错：ERROR in ./src/App.vue Module Error (from ./node_modules/vue-loader/lib/index.js。

解决方法：将 vue-loader 升级至 15.3.0 版本。

需要在 webpack.base.conf.js 配置文件中添加相关插件注册代码。

const {VueLoaderPlugin} = require('vue-loader')
module.exports中添加
 plugins:[new VueLoaderPlugin()]

同时，需修改配置文件 webpack.prod.conf.js 中的优化配置。

报错信息提示：webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead. 即 CommonsChunkPlugin 已被移除，请使用 config.optimization.splitChunks 配置。

解决方法：移除旧的 CommonsChunkPlugin 配置，改用 optimization.splitChunks。

webpack.prod.conf.js webpackConfig配置:
optimization: {
 noEmitOnErrors: true,
 concatenateModules: true,
 splitChunks: {
  chunks: 'all',
  name: 'common',
 },
 runtimeChunk: {
  name: 'runtime'
 }
 }
webpack.prod.conf.js webpackConfig配置: 
optimization:{
 namedModules: true
 },

报错信息：Plugin could not be registered at ‘html-webpack-plugin-before-html-processing'. Hook was not found. 表示插件注册失败，钩子未找到。

解决方法：更新 html-webpack-plugin 至兼容版本，并确保正确注册钩子。

npm i preload-webpack-plugin@next -D

报错信息：Tapable.plugin is deprecated. Use new API on .hooks instead. 提示 Tapable.plugin 已弃用，应使用新的 .hooks API。

问题：extract-text-webpack-plugin 存在兼容性问题，其功能是将 CSS 提取到单独的文件中。

解决方法：卸载 extract-text-webpack-plugin，并安装 mini-css-extract-plugin 替代。

 new MiniCssExtractPlugin({
  filename: utils.assetsPath('css/[name].[contenthash].css'),
  allChunks: false,
 }),

构建出错：ERROR in TypeError: Cannot read property ‘hash' of undefined。

解决方法：检查并修正 MiniCssExtractPlugin 的配置，确保 filename 属性正确引用 contenthash。

  去掉这段
  //打包计时
  const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
  const smp = new SpeedMeasurePlugin();

警告信息：WARNING in configuration The ‘mode' option has not been set, webpack will fallback to ‘production' for this value. Set ‘mode' option to ‘development' or ‘production' to enable defaults for each environment. You can also set it to ‘none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/。

解决方法：在 webpackConfig 中添加 mode: ‘production' 配置项。

再次出现报错：Tapable.plugin is deprecated. Use new API on .hooks instead。

解决方法：更新相关插件以支持新的 hooks API，避免使用已弃用的 plugin 方法。

npm i --save-dev extract-text-webpack-plugin@next

执行安装命令后，会下载到 extract-text-webpack-plugin@4.0.0-beta 版本。

报错信息：Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.o ptimization…。

解决方法：移除 webpack.optimize.CommonsChunkPlugin 相关配置。

• 在 webpackConfig 中与 plugins 同级添加 optimization 配置。
• 具体配置包括 splitChunks 规则，用于代码分割。

optimization: {
 splitChunks: {
   cacheGroups: {
    commons: {
     name: "commons",
     chunks: "initial",
     minChunks: 2
    }
   }
  }
 },

报错信息：Unhandled rejection Error: “dependency” is not a valid chunk sort mode。

new HtmlWebpackPlugin({
  filename: config.build.index,
  template: 'index.html',
  inject: true,
  minify: {
  removeComments: true,
  collapseWhitespace: true,
  removeAttributeQuotes: true
  },
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: 'dependency'
 }),

解决方法：将 chunksSortMode 改为 auto 或者直接注释掉该属性。

至此，执行 npm run build 命令可正常运行。接下来调试 npm run dev，直接运行成功。

升级总结与性能对比

4. 升级总结

开启缓存的情况下，原来的打包时间约为 22s，现在 build 最快仅需 8s 左右，性能提升显著。

升级思路总结：

1. 1. 卸载 webpack 旧版本，安装新版本 webpack 和 webpack-cli。
2. 2. 遇到 loader 或 plugin 报错时，升级对应的 loader 和 plugin；部分在 4.0 中不支持的功能需更换为新的插件。
3. 3. 卸载 ExtractTextPlugin 并删除对应配置，改用 mini-css-extract-plugin。
4. 4. 配置环境 mode 选项。
5. 5. 处理其他 webpack 3.0 优化配置的兼容性问题。

到此这篇关于 webpack 3.0 升级 4.0 的方法步骤的文章就介绍到这了，更多相关 webpack 3.0 升级 4.0 内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！