基于vue-cli2得到的初始化项目升级webpack(简约版）

在webpack的周边系列，loader、预设、插件都更新的很快，一不留神就是报错提示你的xx的模块有问题，大部分是webpack版本不对导致。vue-cli2脚手架基于webpack3，下面借助vue-cli2初始化得到的项目下改造成webpack4。记录如下：(可能大家会觉得说用vue-cli3不香么~，其实记录本文的主要目的是梳理下大体结构思路, 想循序递进迈进新台阶。≧◠◡◠≦✌）

包管理更新

初始化版本：                                 替换结构：

"webpack": "^3.6.0",                       "webpack": "^4.26.0",

                                           "webpack-cli": "^3.3.0"（新增）,

"webpack-dev-server": "^2.9.1",            "webpack-dev-server": "^3.11.0",

"uglifyjs-webpack-plugin": "^1.1.1",       "uglifyjs-webpack-plugin": "^1.2.5",

"extract-text-webpack-plugin": "^3.0.0",   "mini-css-extract-plugin": "^0.9.0",

"html-webpack-plugin": "^2.30.1",          "html-webpack-plugin": "^3.2.0",

"eslint-loader": "^1.7.1",                 "eslint-loader": "^2.0.0",

"vue-loader": "^13.3.0",                   "vue-loader": "^14.2.2",

"babel-loader": "^7.1.1",                  "babel-loader": "^7.1.5",

build文件夹下配置修改

1） mode属性： 开发模式：mode: 'development'； 生产模式：mode: 'production'

2） CommonsChunkPlugin的废除，由splitChunks替代

CommonsChunkPlugin相关代码注释， 配置默认splitChunks如下

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'async', 
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }
};

3） extract-text-webpack-plugin调整为mini-css-extract-plugin

utils.js：

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
  })
}

替换为：
if (options.extract) {
  return [MiniCssExtractPlugin.loader].concat(loaders)
}

webpack.prod.conf.js：

new ExtractTextPlugin({
   filename: utils.assetsPath('css/[name].[contenthash].css'),
   allChunks: false
})


替换为：
new MiniCssExtractPlugin({
   filename: utils.assetsPath('css/[name].[contenthash].css'),
   allChunks: false
})

4）最后如遇到此报错：BaseClient.js?e917:12 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#

去除resolve('node_modules/webpack-dev-server/client')即可正常，原因不详，暂时无深入研究。

demo案例：https://github.com/yang1212/webpack-about/tree/master/vue-cli2-webpack4-jiandan