Vue项目从webpack3.x升级webpack4不彻底指南

时间 2019-11-06

标签 vue 项目 webpack3.x webpack 升级 webpack4 不彻底指南繁體版

原文原文链接

前段时间，泡面将本身的一个Vue-cli构建的前端框架从webpack3.x升级到了4.x版本，如今才拉出来记录一下，已备忘之用，也和你们分享一下，以避免你们采坑。javascript

原先的环境

项目原先经过Vue-cli 2.9.3 版本构建，
原先使用的webpack 3.x版本

首先须要对基础包进行更新(package.json)

webpack 更新到4.x版本，泡面这里更新到了4.28.3
更新webpack-dev-server，泡面更新到了3.1.14版本,
安装webpack-cli，泡面安装的是3.2.1版本

除了上面的这几个，还须要更新下面几个：css

vue-loader 泡面直接升级到了15版本，
eslint-loader 升级到了1.7.1,这个当时在作启动的时候提示了一些错误,因此索性也就升级了.
happypack, 泡面使用了多线程加速,因此这个也必需要升级,不然会报错,泡面更新到了5.0.1
html-webpack-plugin, 这个也须要更新,不然会提示错误,泡面这里升级到了3.2.0

除了上面几个,还须要额外下载一个:html

mini-css-extract-plugin, 该包是要替换掉extract-text-webpack-plugin来使用,因此后者就遗弃掉了.

接着咱们修改一下webpack.base.conf.js,没有使用happypack的这步骤可略过...

泡面这里不知道为何不能使用happypack来挂载vue-loader,不然会提示错误,因此泡面这里将原先的happypack的配置修改回了原先:前端

...
const vueLoaderConfig = require('./vue-loader.conf')
...
module.exports = {
  ...
    {
      test: /\.vue$/,
        // loader: 'happypack/loader?id=happy-vue'
        loader: 'vue-loader',
        options: vueLoaderConfig
    },
  ...  
}
复制代码

接着来调整 webpack.dev.conf.js

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

...
  // 开发环境引入
  mode: 'development',
  ...
  module: {
    ...
  }
  devServer: {
    ...
  }
复制代码

webpack4须要手动引入vue-loader插件,由于泡面是从14版本升级到15版本,点我查看官方文档,如何从 v14 迁移,因此这里须要引入:java

...
const VueLoaderPlugin = require('vue-loader/lib/plugin')
...
module.export = {
  ...
  plugins: [
    ...
    // 引入vue-loader插件
    new VueLoaderPlugin(),
    ...
    // 同时,泡面注释掉了vue-loader的happypack
    // new Happypack({
    // id: 'happy-vue',
    // loaders: [{
    // loader: 'vue-loader',
    // options: vueLoaderConfig
    // }]
    // })
  ]
}
复制代码

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

webpack.DefinePlugin
webpack.NamedModulesPlugin
webpack.NoEmitOnErrorsPlugin

ok, 这个文件就改完了.webpack

接着来修改webpack.prod.conf.js

同开发环境,须要引入mode和vue-loader,如出一辙,因此这里不赘述了. 接着,咱们须要在配置表里添加optimization选项:web

...
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插件,并添加到插件里:json

...
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 (全部的...)

ok, 至此该文件就调整完了.

最后一个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)
复制代码

ok, 大功告成! 至此webpack4的配置文件就所有修改完成了.

目前, 泡面至在此记录流水帐,回头性能测试再发文章记录.

ps: 若是出现这种错误

error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
复制代码

请从新安装一下 vue-template-compiler

完！碎觉~