webpack4升级

1、安装webpack-cli、webpack

"webpack": "^4.39.3"

"webpack-cli": "^3.3.7"

• npm run dev报错
• 
• 因为 webpack 和 webpack-dev-server 版本不兼容，升级   "webpack-dev-server": "^3.1.4"
• 再次启动，报错
• 
• 因为 html-webpack-plugin 版本不兼容 安装 "html-webpack-plugin": "^3.2.0"，再次启动
• 
• 升级 "vue-loader": "^15.0.10"    再次启动
• 
• 最新版的 vue-loader 需要加一个新的配置 VueLoaderPlugin

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

  // 在下面的插件中加入
  plugins: [
      new VueLoaderPlugin(),
  ]

  
  // webpack.prod.conf.js 文件同样
  // 引入
  const { VueLoaderPlugin } = require('vue-loader')

  // 在下面的插件中加入
  plugins: [
      new VueLoaderPlugin(),
  ]

• 再次启动

• 

• dev环境升级完成

• 运行npm run build报错

• 

  因为  webpack.optimize.CommonsChunkPlugin 已经被弃用，需要使用新的配置 config.optimization.splitChunk

  // webpack.prod.conf.js
  // 在 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
   },

• 再次运行

• 

• 因为官方已经不推荐使用 extract-text-webpack-plugin 提取 css 样式，可以使用 mini-css-extract-plugin 替代

• // 首先安装  [email protected]
  // 并且去掉 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')

  // 下面的 generateLoaders 函数更改配置（*中间的为改动部分）
  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) {

     // ********************
     // 改动在这里
       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')

  // 去掉 plugins 里的配置
  new ExtractTextPlugin({
     filename: utils.assetsPath('css/[name].[contenthash].css'),
     allChunks: true,
   }),

  // 然后加入新的插件配置
  new MiniCssExtractPlugin({
     filename: utils.assetsPath('css/[name].[contenthash:12].css'),
     allChunks: true,
   }),

• 再次启动

• 

• webpack4 需要指定打包的模式 (mode)，指定一下就好，可以在 package.json 的命令中指定，也可以写入配置

  // 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

• .babellrc中添加插件"transform-es2015-modules-commonjs"