webpack3升级webpack4需要做什么

webpack配置信息可在此查看属性

https://developer.aliyun.com/mirror/npm/package/webpack-command  

build 文件夹

utils.js中 

const ExtractTextPlugin = require('extract-text-webpack-plugin') 修改前

const MiniCssExtractPlugin = require('mini-css-extract-plugin') 修改后

function generateLoaders（）{} 中

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

//修改后
if (options.extract) {
   return [MiniCssExtractPlugin.loader].concat(loaders)
  } else {
  return ['vue-style-loader'].concat(loaders)
}

build\webpack.prod.conf.js

//修改前
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')

//修改后
const MiniCssExtractPlugin = require('mini-css-extract-plugin')//替换ExtractTextPlugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')//替换ParallelUglifyPlugin

使用splitChunk替代commonsChunkPlugin

optimization:{
    minimizer:[
      //替换压缩方式
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: config.build.productionSourceMap,
        uglifyOptions: {
          warnings: false
        }
      }),
      new OptimizeCSSPlugin({
        cssProcessorOptions: config.build.productionSourceMap
          ? { safe: true, map: { inline: false } }
          : { safe: true }
      }),
    ],
    splitChunks:{
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: false,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'initial',
          priority: -10
        }
      }
    },
    runtimeChunk: {
      name: 'manifest'
    },
  }

去除原有使用CommonsChunkPlugin插件

build\webpack.base.conf.js

添加mode，mode必须为development、production、none中的一个。

module.exports = {
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
  context: path.resolve(__dirname, '../'),
  entry: {
    app:  ["babel-polyfill", "./src/main.js"]
  }
......
}

原来uglifyjs-webpack-plugin、optimize-css-assets-webpack-plugin配置在plugins中，现在修改为optimization.minimizer中配置

const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
optimization: {
  minimizer: [
      new UglifyJsPlugin({
          cache: true,
          parallel: true,
          sourceMap: config.build.productionSourceMap,
          uglifyOptions: {
              warnings: false
          }
      }),
      new OptimizeCSSPlugin()
  ]
}

升级

1、升级webpack包
vue4由于已经将命令行部分迁移到webpack-cli，所以还得新安装一个包

npm i webpack -D
npm i webpack-cli -D

2、升级webpack-dev-server
webpack4对应的webpack-dev-server从2.x必须升级到3.x,否则会报错

npm i webpack-dev-server -D

3、升级extract-text-webpack-plugin插件
由于旧版本的extract-text-webpack-plugin插件已经不支持webpack4，所以必须升级。但是在我写下这篇文章的当下还没有正式版，只有一个测试版，可以使用

官方提供的是mini-css-extract-plugin这个插件来做替代品，但是这个插件不支持HMR，故而选择了extract-text-webpack-plugin插件

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
new MiniCssExtractPlugin({
    filename: utils.assetsPath('css/[name].[contenthash].css'),
    chunkFilename: utils.assetsPath('css/[name].[contenthash].css')

4、升级html-webpack-plugin  "^3.2.0"

5、升级node-sass  "^4.10.0"

6、升级vue-loader 14以上  "^14.2.4"

7、升级webpack插件

"copy-webpack-plugin": "^5.0.3",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-plugin": "^3.2.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"uglifyjs-webpack-plugin": "^2.1.2",
"vue-loader": "^14.2.4",
"webpack": "^4.32.2",
"webpack-cli": "^3.3.2",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-dev-server": "^3.4.1",
"webpack-merge": "^4.2.1",
"mini-css-extract-plugin": "^0.6.0",//增加项

升级版本号为本人项目中版本号按需修改记得升级

 

因在原有基础上升级保留一些webpack3的配置 copy出来文件重新install 后 build发现报错

ERROR in static/js/2.58a5c9c8d66d1bdb07e5.js from UglifyJs  undefined

查询一下发现是uglifyjs-webpack-plugin webpack3中支持 es6转es5

webpack4中不适用  更换 terser-webpack-plugin

build\webpack.prod.conf.js进行修改

const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin");
//const UglifyJsPlugin = require("uglifyjs-webpack-plugin");修改引用
const TerserPlugin = require("terser-webpack-plugin");//修改后
optimization: {
  minimizer: [
      new UglifyJsPlugin({
          cache: true,
          parallel: true,
          sourceMap: config.build.productionSourceMap,
//          uglifyOptions: {
//              warnings: false
//          },//修改uglifyOptions 为terserOptions
          terserOptions: {
              warnings: false
          },
      }),
      new OptimizeCSSPlugin()
  ]
}