Vue 的 webpack 2.0 到 webpack 4.0 升级：utils.js 篇

Vue 的 webpack 2.0 升级到 webpack 4.0 解决方案（utils 篇）

背景

随着项目的发展，我们遇到了新的需求，需要使用 webpack 4.0 中引入的新功能。由于我们项目最初使用 Vue CLI 脚手架搭建，因此 webpack 版本为 2.0。

升级步骤

1. 安装 webpack 4.0

npm install webpack@4.0.0 --save-dev

2. 移除旧的 webpack 配置

删除 webpack.config.js 文件。

3. 创建新的 webpack 配置

创建一个新的 webpack.config.js 文件，内容如下：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  // 入口文件
  entry: './src/index.js',
  // 输出文件
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // 模块加载器
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  // 插件
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
};

4. 更新 package.json

在 package.json 文件中，将 webpack 和 webpack-cli 的版本更新为 4.0.0：

{
  "devDependencies": {
    "webpack": "^4.0.0",
    "webpack-cli": "^4.0.0"
  }
}

utils.js 升级

webpack 4.0 对 utils.js 文件做了一些更改，需要进行相应升级。

1. 移除 exports.HotModuleReplacementPlugin

webpack 4.0 中，HotModuleReplacementPlugin 已不再是一个单独的插件。现在它包含在 webpack.HotModuleReplacementPlugin 中。因此，可以从 utils.js 文件中删除以下代码：

exports.HotModuleReplacementPlugin = webpack.HotModuleReplacementPlugin;

2. 导出新的 HotModuleReplacementPlugin

添加以下代码以导出新的 HotModuleReplacementPlugin：

exports.HotModuleReplacementPlugin = webpack.webpack.HotModuleReplacementPlugin;

注意事项

在升级过程中，您可能还会遇到以下问题：

• webpack.optimize.CommonsChunkPlugin 已弃用 ：使用 optimization.splitChunks 替换。
• HtmlWebpackPlugin 不再支持传递 HTML 字符串 ：改用 template 选项传递 HTML 模板。

总结

通过遵循这些步骤，您可以顺利将 Vue 项目中的 webpack 从 2.0 升级到 4.0。升级后，您将能够利用 webpack 4.0 中引入的新功能，从而增强项目的功能和性能。