在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