webpack3.6.0升级4.30.0完整过程

一、 环境

1. node: v16.14.2 至少大于 v6.0
2. npm v8.5.0

二、升级包

webpack系列

webpack 3.6.0 -> 4.30.0
webpack-cli -> 3.3.12
webpack-dev-server 2.9.1 -> 3.11.3
webpack-marge 4.1.0 -> 4.2.2

卸载：
npm uninstal webpack webpack-cli webpack-dev-server webpack-merge

安装：
npm i -D webpack@4.30.0 webpack-cli@3.3.12 webpack-dev-server@3.11.3 webpack-merge@4.2.2

babel系列

使用命令npx babel-upgrade --write 升级（babel7系列）

webpack插件系列

clean-webpack-plugin -> 3.0.0
copy-webpack-plugin 4.0.1 -> 6.4.1
extract-text-webpack-plugin -> mini-css-extract-plugin 0.11.0
friendly-errors-webpack-plugin 1.6.1 -> 1.7.0
html-webpack-plugin 2.30.1 -> 4.5.0
optimize-css-assets-webpack-plugin 3.2.0 -> 5.0.8
uglifyjs-webpack-plugin -> terser-webpack-plugin 4.2.3
webpack-bundle-analyzer 2.9.0 -> 4.5.0

卸载：
npm uninstall copy-webpack-plugin extract-text-webpack-plugin friendly-errors-webpack-plugin html-webpack-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin webpack-bundle-analyzer

安装：
npm install -D clean-webpack-plugin@3.0.0 copy-webpack-plugin@5.1.2 mini-css-extract-plugin@0.11.0 friendly-errors-webpack-plugin@1.7.0 html-webpack-plugin@4.5.0 optimize-css-assets-webpack-plugin@5.0.8 terser-webpack-plugin@4.2.3 webpack-bundle-analyzer@4.5.0

loader系列

babel-loader 8.0.0 -> 8.3.0 （打包报错可以降为8.0.6）
css-loader 0.28.0 -> 3.6.0
eslint-loader -> eslint-webpack-plugin 2.7.0 （没有可以不用）
file-loader 1.1.4 -> 6.2.0
postcss-loader 2.0.8 -> 4.3.0
style-loader -> 2.0.0
url-loader 0.5.8 -> 4.1.1
vue-loader 13.3.0 -> 15.7.0

卸载：
npm uninstall babel-loader css-loader eslint-loader file-loader postcss-loader url-loader vue-loader

安装：
npm install -D babel-loader@8.3.0 css-loader@3.6.0 eslint-webpack-plugin@2.7.0 file-loader@6.2.0 postcss-loader@4.3.0 style-loader@2.0.0 url-loader@4.1.1 vue-loader@15.7.0

eslint系列 （有就都升级，没有就不用，不用也可以不用升级）

eslint 4.15.0 -> 7.32.0
eslint-config-standard 10.2.1 -> 16.0.3
eslint-friendly-formatter 3.0.0 -> 4.0.1
eslint-plugin-import 2.7.0 -> 2.26.0
eslint-plugin-node 5.2.0 -> 11.1.0
eslint-plugin-promise 3.4.0 -> 5.2.0
eslint-plugin-standard 3.0.1 -> 删除
eslint-plugin-vue 4.0.0 -> 9.7.0

卸载：
npm uninstall eslint eslint-config-standard eslint-friendly-formatter eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue

安装：
npm install -D eslint@7.32.0 eslint-config-standard@16.0.3 eslint-friendly-formatter@4.0.1 eslint-plugin-import@2.26.0 eslint-plugin-node@11.1.0 eslint-plugin-promise@5.2.0 eslint-plugin-vue@9.7.0

vue系列（根据实际需要升级）小编没升级

vue 2.5.2 -> 2.7.8
vue-template-compiler 2.5.2 -> 2.7.8 (注：和vue版本必须一致)
vue-router 3.0.1 -> 3.5.1
vuex 3.6.2

卸载：
npm uninstall vue vue-template-compiler vue-router vuex
安装：
npm install -D vue-template-compiler@2.7.8 vue@2.7.8 vue-router@3.5.1 vuex@3.6.2

其它依赖 （小编只升级了core-js（必须升级），其他的没用到就没升级）

core-js -> 3.26.1
less -> 4.1.3
less-loader -> 7.3.0
sass -> 1.56.1
sass-loader -> 10.4.1
node-sass -> 4.14.1

安装：npm install -D core-js@3.26.1 less@4.1.3 less-loader@7.3.0 sass@1.56.1 sass-loader@10.4.1 node-sass@4.14.1

三、配置webpack

1、build/uitls.js文件修改

删除：const ExtractTextPlugin = require(‘extract-text-webpack-plugin’)
添加：const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)
删除 ExtractTextPlugin.extract

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

修改build/webpack.base.conf.js文件

添加依赖
const VueLoaderPlugin = require(‘vue-loader/lib/plugin’)
const ESLintPlugin = require(‘eslint-webpack-plugin’) // 不用eslint的可以不用引入

在module.exports添加 mode: process.env.NODE_ENV

在module.exports添加plugins (这个文件默认应该是没有plugins)

plugins: [
    new VueLoaderPlugin(),
    new ESLintPlugin({
   
      fix: true, // 启用ESLint自动修复功能
      extensions: ['js', 'jsx'],
      context: resolve('src'), // 文件根目录