说明

webpack5相对于webpack3有着各方面的提升，尤其是tree shaking功能更加强大，所以对老项目vue2.0+webpack3，尝试升级到webpack5，总结了升级过程中可能会遇到的问题，大部分内容出自如下文章中：vue-cli2 老项目webpack3升级webpack5过程总结_娃哈哈_的博客-CSDN博客_webpack升级，补充一些遇到的其他问题。

升级步骤

1.拷贝除依赖外的项目文件到新文件夹中

避免在原项目上操作，拷贝完后执行npm install安装依赖。

2.升级webpack版本

npm i webpack@latest -D

3.更改启动命令，然后执行npm run dev启动项目

更改启动命令

"scripts": {
 ---   "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 +++   "dev": "npx webpack serve --config build/webpack.dev.conf.js --color --progress",
    "start": "npm run dev",
    "build": "node build/build.js",
    "watch": "cross-env NODE_ENV=production npm_config_report=true npm run build"
},

 4.启动问题总结

1.安装webpack-cli

2.webpack-dev-server升级

升级webpack-dev-server到@3以上版本

3.去除NamedModulesPlugin

webpack5在开发环境已经默认安装，webpack.dev.conf.js的plugins中去除相应配置

--- new webpack.NamedModulesPlugin()

4.webpack.base.conf.js的node设置

将webpack.base.conf.js中node属性中的设置改到resolve的fallback中。

5.devtool

config/index.js

---    devtool: 'cheap-module-eval-source-map',
+++    devtool: 'eval-cheap-module-source-map',

6.html-webpack-plugin

升级到最新版

npm i html-webpack-plugin@latest -D

7.rules使用use属性

---    loader: 'style-loader!css-loader',
+++    use: ["style-loader","css-loader"],

8.升级vue-loader

npm i vue-loader@15 -D

升级到15版本即可，不然会报如下错误

 注意：vue-loader@15.*之后必须带有VueLoaderPlugin，webpack.dev.conf.js

+++    const VueLoaderPlugin = require('vue-loader/lib/plugin')

+++    new VueLoaderPlugin()

 9.升级vue-template-compiler

npm i vue-template-compiler@latest -D

同时保证vue-template-compiler和vue版本一致

10.设置mode值

webpack.dev.conf.js

+++    mode: "development",

webpack.prod.conf.js

+++    mode: "production",

其他方案：去除DefinePlugin设置，同时optimization.nodeEnv = false

11.其他建议不推荐或者被移除的插件

• extract-text-webpack-plugin已被移除，由mini-css-extract-plugin插件替代

  npm i mini-css-extract-plugin@latest -D

  ---    const ExtractTextPlugin = require('extract-text-webpack-plugin')
  +++    const MiniCssExtractPlugin = require('mini-css-extract-plugin')

  同时utils.js修改

if (options.extract) {
   return [{loader: MiniCssExtractPlugin.loader}].concat(loaders)
   // -- return ExtractTextPlugin.extract({
   // --  use: loaders,
   // --  fallback: 'vue-style-loader'
   // })
} else {
    return [{loader: 'vue-style-loader'}].concat(loaders)
    // return ['vue-style-loader'].concat(loaders)
}

• webpack-merge

npm i webpack-merge@latest -D

注意：新版引用方式要修改，有三个地方要修改，webpack.dev.conf.js，webpack.prod.conf.js，config/dev.env.js

---    const merge = require('webpack-merge')
+++    const { merge }= require('webpack-merge')

• copy-webpack-plugin

npm i copy-webpack-plugin@latest -D

然后修改配置，gitignore设置为false，不然会报Path is not in....

new CopyWebpackPlugin({
      patterns: [{
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        globOptions: {
          dot: true,
          gitignore: false,
          ignore: ['.*'],
        }
      }]
    })