Some time ago, bubble noodles upgraded a vue-CLI built front-end framework from Webpack 3.x to 4.x version, now just pulled out to record, has forgotten the use, also share with everyone, so as to avoid everyone pits.

Original environment

  • The project was originally built using vue-CLI version 2.9.3,
  • The original webPack 3.x version

First you need to update the base package (package.json)

  • Webpack has been updated to 4.x and instant noodles have been updated to 4.28.3
  • Update webpack-dev-server to 3.1.14 version.
  • Install Webpack – CLI, the instant noodles installed is 3.2.1 version

In addition to the above, we need to update the following:

  • Vue-loader instant noodles have been upgraded to version 15.
  • Eslint-loader has been upgraded to 1.7.1, which was booted with some errors, so it has been upgraded.
  • Happypack, instant noodles use multi-threaded acceleration, so this must be updated as well, otherwise error will be reported, instant noodles updated to 5.0.1
  • Html-webpack-plugin, this also needs to be updated, otherwise there will be an error, instant here upgraded to 3.2.0

In addition to the above, you need to download an additional one:

  • Mini-css-extract-plugin, this package was used to replace the extract-text-webpack-plugin, so the latter was abandoned.

And then let’s modify itwebpack.base.conf.jsHappypack can skip this step without using happypack.

Happypack cannot be used to mount vue-loader, otherwise error will be displayed, so happypack can be used to mount vue-loader.

. const vueLoaderConfig =require('./vue-loader.conf')... module.exports = { ... {test: /\.vue$/.// loader: 'happypack/loader? id=happy-vue'
        loader: 'vue-loader'.options: vueLoaderConfig
    },
  ...  
}
Copy the code

Now let’s adjustwebpack.dev.conf.js

First introduce mode where the configuration is merged

.// The development environment is introduced
  mode: 'development'. module: { ... } devServer: { ... }Copy the code

Webpack4 requires manual introduction of vue-loader plug-in, because instant noodles are upgraded from version 14 to version 15, click me to view the official documentation, how to migrate from V14, so we need to introduce:

. const VueLoaderPlugin =require('vue-loader/lib/plugin')... module.export = { ... plugins: [ ...// Import vue-loader plug-in
    new VueLoaderPlugin(),
    ...
    // At the same time, instant noodles comment out vue-loader happypack
    // new Happypack({
    // id: 'happy-vue',
    // loaders: [{
    // loader: 'vue-loader',
    // options: vueLoaderConfig
    / /}]
    // })]}Copy the code

Next, the following plug-ins are deprecated and commented out

  • webpack.DefinePlugin
  • webpack.NamedModulesPlugin
  • webpack.NoEmitOnErrorsPlugin

Ok, this file is done.

Next, modify webpack.prod.conf.js

The same as the development environment, you need to introduce mode and vue-loader, exactly the same, so I won’t repeat here. Next, we need to add the Optimization option to the configuration table:

. output: { ... },// add here
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: [...].Copy the code

Next, we need to import the mini-CSs-extract-plugin and add it to the plugin:

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

Then, we need to comment out the deprecated plug-in:

  • webpack.DefinePlugin
  • UglifyJsPlugin (in optimization)
  • ExtractTextPlugin
  • OptimizeCSSPlugin (put in optimization)
  • CommonsChunkPlugin (所有的…)

Ok, the file is now adjusted.

Finally, utils.js

Here is the need to add the mini-CSS -extract-plugin

.// Comment out the original plug-in
// const ExtractTextPlugin = require("extract-text-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin').../ / to find:
// return ExtractTextPlugin.extract({
// use: loaders,
// fallback: "vue-style-loader",
// publicPath: '.. /.. / '
// });
/ / changed to:
return [MiniCssExtractPlugin.loader].concat(loaders)
Copy the code

Ok, you’re done! At this point, webpack4 configuration files are all modified.

At present, instant noodles to record in this running account, back to the performance test and then send the article record.

Ps: If this error occurs

error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.
Copy the code

Please reinstall vue-template-Compiler

Finished! Broken sleep ~

Article Reference:

  • Vue project upgrade webpack4 guide
  • Vue-loader is migrated from 14