旧版vue-cli脚手架Webpack3项目如何升级Webpack4

Posted 2022-02-19 飞翔的熊blabla

 vue-cli脚手架出到了4.3.1版本，目前主推通过create命令来新建项目。与过去的vue-cli2的init命令不同的是：create命令脚手架建完的项目webpack为4，而init采用的模板中引用的webpack版本还是3。（单独安装最新的@vue/cli-init命令安装的webpack版本也是3）
  为了解决构建效率和最新插件兼容性的问题，本篇文章记一下怎样把最开始通过init命令建的webpack3的项目升级为webpack4。

升级依赖

  为了避免手动编辑package.json文件产生包依赖出错的问题，我们通过uninstall和install来更新包。首先更新webpack，打开项目的package.json文件，webpack包是在devDependencies开发依赖中的，所以可以通过如下命令来更新：

npm uninstall webpack
npm install webpack --save-dev
复制代码

  同样方法，需要在开发依赖中更新webpack-dev-server、webpack-cli、vue-loader、eslint-loader、html-webpack-plugin、eslint、eslint-plugin-vue。

调整 webpack.base.conf.js

  Vue Loader v15 现在需要配合一个 webpack 插件才能正确使用，这部分不管调试还是线上构建都是需要的，所以在base配置文件中调整：

//webpack.dev.conf.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = 
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]

复制代码

调整 webpack.dev.conf.js

  首先在合并配置的地方引入mode：

//webpack.dev.conf.js
...
// 开发环境引入
mode: 'development',
...
module: 
  ...

devServer: 
  ...

复制代码

  接着, 以下插件被废弃掉了,直接注释掉

– webpack.DefinePlugin  
– webpack.NamedModulesPlugin  
– webpack.NoEmitOnErrorsPlugin
复制代码

调整 webpack.prod.conf.js

  同dev的配置，prod也要添加 mode:production，这里就不再赘述了。
  接着需要在配置表里添加optimization选项:

//webpack.prod.conf.js
...
output:  ...,
// 这里添加
optimization: 
    runtimeChunk: 
      name: 'manifest'
    ,
    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: 
        vendor: 
          name: 'vendor',
          chunks: 'initial',
          priority: -10,
          reuseExistingChunk: false,
          test: /node_modules\\/(.*)\\.js/
        ,
        styles: 
          name: 'styles',
          test: /\\.(scss|css)$/,
          chunks: 'all',
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true
        
      
    
  ,
  plugins: [...]  

复制代码

  接着,我们需要引入mini-css-extract-plugin插件,并添加到插件里:

//webpack.prod.conf.js
...
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
plugins: [
  ...
  new MiniCssExtractPlugin(
    filename: utils.assetsPath('css/[name].[contenthash].css')
  ),
  ...  
]
复制代码

  然后, 我们需要把废弃掉的插件注释掉:

– webpack.DefinePlugin
– UglifyJsPlugin (放到optimization里了)
– ExtractTextPlugin
– OptimizeCSSPlugin (放到optimization里了)
– CommonsChunkPlugin (换成了splitChunksPlugin，在optimization里了)
复制代码

修改 utils.js

  这里主要是需要添加mini-css-extract-plugin插件

...
// 注释掉原来的插件
// const ExtractTextPlugin = require("extract-text-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
// 找到:
// return ExtractTextPlugin.extract(
//   use: loaders,
//   fallback: "vue-style-loader",
//   publicPath: '../../'
// );
// 改为:
return [MiniCssExtractPlugin.loader].concat(loaders)
复制代码

  目前文件修改就完成了。

其他问题

  如果vue文件模板中有使用pug，也需要引入pug-loader、pug-plain-loader、pug：

npm install pug-loader pug-plain-loader pug --save-dev
复制代码

  在webpack的base配置文件中加入：

 test: /\\.pug$/, use: ['pug-plain-loader'] ,
复制代码

  如果报：

Cannot assign to read only property 'exports' of object '#<Object>' 
复制代码

  这样的错误可以注释掉.babelrc文件中的 "modules": false ：

["env", 
    //注释掉
    //"modules": false,
    "targets": 
    "browsers": ["> 5%", "last 2 versions", "not ie <= 8"]
    
]
复制代码

参考：
《Vue项目从webpack3.x升级webpack4完全指南》
webpack官网升级指引

注意:HTML-WEBPACK-PLUGIN 需要升级

作者：大洋洋2020
链接：https://juejin.cn/post/6844904146332565518
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。