webpack3升级webpack4所遇问题以及解决方案

packjson依赖包升级

1、 "webpack": "^3.6.0" --->  "^4.44.1"
2、 "webpack-dev-server": "^2.9.1" ---> "^3.11.0"
3、 增加"webpack-cli": ---> "^3.3.12"（Webpack4之后都需要安装它）
4、 "html-webpack-plugin": "^2.30.1" ---> "^4.4.1"
5、 "extract-text-webpack-plugin": "^3.0.0", ---> "mini-css-extract-plugin": "^0.11.0" 
6、 "eslint-loader": "^1.7.1" --->  "^4.0.2"
7、 "vue-loader": "^13.3.0" --->"^15.9.3",
8、 "babel-eslint": "^8.2.1" --->"^10.1.0"
9、 "babel-plugin-transform-es2015-modules-commonjs":“^6.26.0”---> "^6.26.2"
10、"optimize-css-assets-webpack-plugin": "^3.2.0" ---> "^5.0.4"

.babelrc中修改

将env.plugins中transform-es2015-modules-commonjs放置到env同级plugins中
（解决问题：项目启动后控制台报BaseClient.js?e917:12 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#）

Build中js文件

utils.js、webpack.prod.conf.js中（解决问题：Error: Path variable [contenthash] not implemented in this context: static/css/[name].[contenthash].css）

方案1：

本项目采用方案1插件

1、const ExtractTextPlugin = require('extract-text-webpack-plugin')
修改为：
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
2、utils.js中
if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader',
        publicPath: '../../'
      })
} 
修改为
if (options.extract) {
      return [MiniCssExtractPlugin.loader].concat(loaders)
}
3、webpack.prod.conf.js中
 new MiniCssExtractPlugin({
      filename: 'css/app.[name].css',
      chunkFilename: 'css/app.[contenthash].css'  // use contenthash *
   }),

方案2：

将extract-text-webpack-plugin升级到^4.0.0-beta.0版本
且将
new MiniCssExtractPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css'),
      allChunks: true,   
}),
修改为
new MiniCssExtractPlugin({
		filename: 'css/app.[name].css',
		chunkFilename: 'css/app.[contenthash].css' 
	})

采用contenthash，项目构建时，报错如下图：

查看TemplatedPathPlugin.js源码发现

webpack.base.conf.js中（解决问题：项目打包后警告WARNING in configurationThe ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.You can also set it to ‘none’ to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/）

1、module.exports 中增加

mode: 'development', // mode有以下三个可选值development、production、none  
webpack.dev.conf.js、webpack.prod.conf.js中（解决问题：项目启动Module Error (from ./node_modules/vue-loader/lib/index.js):vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
const VueLoaderPlugin = require('vue-loader/lib/plugin')
Plugins：中增加new VueLoaderPlugin()

webpack.prod.conf.js中（解决问题：Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead。原因：CommonsChunkPlugin已被webpack4废弃，推荐使用SplitChunkPlugin抽离公共模块）

1、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
    }),
修改为：
optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          chunks: "all",
          minChunks: 2,
          maxInitialRequests: 5, // The default limit is too small to showcase the effect
          minSize: 0 // This is example is too small to create commons chunks
        },
        vendor: {
          test: /node_modules/,
          chunks: "all",
          name: "vendor",
          priority: 10,
          enforce: true
        }
      }
    }
  },

2、

new HtmlWebpackPlugin({ 
chunksSortMode: 'dependency'修改为none’
 })

项目启动时间配置

时间信息（详细在文末图片）

配置 Webpack3.0 webpack4 webpack4+babel
cache-loader webpack4+babel自身缓存 webpack4+babel自身缓存
vue+cache-loader
启动时间 50s左右 35s左右 19s左右 19s左右 15s左右

具体配置

1、增加"cache-loader": "^4.1.0"
2、增加speed-measure-webpack-plugin速度分析插件

webpack.base.conf.js中修改配置如下：
1、const SpeedMeasurePlugin = require('speed-measure-webpack-plugin') const smp = new SpeedMeasurePlugin()
module.exports = smp.wrap(配置项)
2、module.exports.module.rules 中
{ 
test: /\.js$/, 
loader: 'babel-loader', 
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] },
修改为
{ 
test: /\.js$/, 
use: ['babel-loader?cacheDirectory'],
//use: ['cache-loader','babel-loader] 也可以
include: [resolve('src'), resolve('test')] 
},

vue-loader.conf.js中修改配置如下：

module.exports增加
cacheDirectory: path.resolve(__dirname, '../node_modules/.cache/vue-loader'), 
cacheIdentifier: 'cache-loader:{version} {process.env.NODE_ENV}'

项目启动时间详细如下：
1、使用webpack4启动时间

2、使用webpack4+cache-loader缓存启动时间

3、使用webpack4+babel-loader自身缓存启动时间

4、使用webpack4+js-cache-loader+vue-cache-loader缓存启动时间