webpack4 upgrade

1. Install webpack-cli and webpack

"webpack": "^4.39.3"

"webpack-cli": "^3.3.7"

• npm run dev reports an error
• 
• Because webpack and webpack-dev-server versions are not compatible, upgrade "webpack-dev-server": "^3.1.4"
• Start again, error
• 
• Because the html-webpack-plugin version is incompatible install "html-webpack-plugin": "^3.2.0", start again
• 
• Upgrade "vue-loader": "^15.0.10" to start again
• 
• The latest version of vue-loader needs to add a new configuration VueLoaderPlugin

• // webpack.dev.conf.js
  // 引入
  const { VueLoaderPlugin } = require('vue-loader')

  // Add plugins to the following plugin
  : [
      new VueLoaderPlugin(),
  ]

  
  // webpack.prod.conf.js file also
  // import
  const { VueLoaderPlugin } = require('vue-loader')

  // Add plugins to the following plugin
  : [
      new VueLoaderPlugin(),
  ]

• start again

• 

• The dev environment upgrade is complete

• Run npm run build and report an error

• 

  Because webpack.optimize.CommonsChunkPlugin has been deprecated, you need to use the new configuration config.optimization.splitChunk

   

  // webpack.prod.conf.js
  // Add configuration optimization at the same level as plugins
  optimization: {    splitChunks: {      cacheGroups: {        vendor: {          test: /[\\/]node_modules[\\/]/,          name: 'vendor ',          chunks: 'all'        },        manifest: {          name: 'manifest',          minChunks: Infinity        },      }    },  },  plugins: [...]
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  // 去掉 plugins 中的这部分代码
  new webpack.optimize.CommonsChunkPlugin({
     name: 'vendor',
     minChunks (module) {
       // any required modules inside node_modules are extracted to vendor
       return (
         module.resource &&
         /\.js$/.test(module.resource) &&
         module.resource.indexOf(
           path.join(__dirname, '../node_modules')
         ) === 0
       )
     }
   }),
   // extract webpack runtime and module manifest to its own file in order to
   // prevent vendor hash from being updated whenever app bundle is updated
   new webpack.optimize.CommonsChunkPlugin({
     name: 'manifest',
     minChunks: Infinity
   }),
   // This instance extracts shared chunks from code splitted chunks and bundles them
   // in a separate chunk, similar to the vendor chunk
   // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
   new webpack.optimize.CommonsChunkPlugin({
     name: 'app',
     async: 'vendor-async',
     children: true,
     minChunks: 3
   },

• run again

• 

• Because the official has deprecated the use of extract-text-webpack-plugin to extract css styles, you can use mini-css-extract-plugin instead

• // First install [email protected]
  // And remove the package in package.json "extract-text-webpack-plugin": "^4.0.0-beta.0",

  // webpack.base.conf.js

  // 去掉 extract-text-webpack-plugin
  // const ExtractTextPlugin = require('extract-text-webpack-plugin')

  // 引入
  const MiniCssExtractPlugin = require('mini-css-extract-plugin')

  // The following generateLoaders function changes the configuration (*the middle is the changed part)
  function generateLoaders (loader, loaderOptions) {    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
  

     if (loader) {
       loaders.push({
         loader: loader + '-loader',
         options: Object.assign({}, loaderOptions, {
           sourceMap: options.sourceMap
         })
       })
     }

     // Extract CSS when that option is specified
     // (which is the case during production build)
     if (options.extract) {

     // *********************
     // change here
       return [MiniCssExtractPlugin.loader].concat(loaders)
     // ************* ***********

     } else {
       return ['vue-style-loader'].concat(loaders)
     }
   }

  // webpack.prod.conf.js

  // 去掉 extract-text-webpack-plugin
  // const ExtractTextPlugin = require('extract-text-webpack-plugin')

  // 引入
  const MiniCssExtractPlugin = require('mini-css-extract-plugin')

  // Remove the configuration in plugins
  new ExtractTextPlugin({    filename: utils.assetsPath('css/[name].[contenthash].css'),    allChunks: true,  }),
  
  
  

  // Then add a new plugin configuration
  new MiniCssExtractPlugin({    filename: utils.assetsPath('css/[name].[contenthash:12].css'),    allChunks: true,  }),
  
  
  

• start again

• 

• webpack4 needs to specify the packaging mode (mode), just specify it, you can specify it in the command of package.json, or you can write it into the configuration

   

  // webpack.dev.conf.js
  const webpackConfig = merge(baseWebpackConfig, {
      mode: 'development',
      module: {...}
  }

  
  // webpack.prod.conf.js 
  const webpackConfig = merge(baseWebpackConfig, {
      mode: 'production',
      module: {...}
  }

• Cannot assign to read only property 'exports' of object '#' (mix require and export) #4039

• Add plugin "transform-es2015-modules-commonjs" to .babellrc