vue-webpack3x --> webpack4x
- 先在原来的项目里升级所有的依赖包
npm update- 相比webpack3x webpack4x需要多安装一个webpack-cli
npm install webpack-cli- 删除原来的
extract-text-webpack-plugin使用mini-css-extract-plugin替代
// 使用yarnyarn remove extract-text-webpack-pluginyarn add --dev mini-css-extract-plugin// webpack3xconst ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);if (options.extract) { ?return ExtractTextPlugin.extract({ ???use: loaders, ???allback: ‘vue-style-loader‘ ?})} else { ?return [‘vue-style-loader‘].concat(loaders)}// 改为const MiniCssExtractPlugin = require("mini-css-extract-plugin");if (options.extract) { ?return [MiniCssExtractPlugin.loader].concat(loaders)} else { ?return [‘vue-style-loader‘].concat(loaders)}// webpack.prod.conf.jsconst ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);new ExtractTextPlugin({ ?filename: utils.assetsPath(‘css/[contenthash].css‘)})// 改为const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘);new MiniCssExtractPlugin({ ?filename: utils.assetsPath(‘css/[contenthash].css‘)})- webpack.base.conf.js
// 在入口之前 添加 新版webpack强制要求添加，不添加也可以执行，会有警告module.exports = { ?mode: process.env.NODE_ENV, // development || production || none ?...}- 针对 找不到eslint的报错
// 在webpack.dev.conf.js 和 webpack.prod.conf.js 中的plugins下 添加（只是单纯的添加） 如下配置new webpack.LoaderOptionsPlugin({ options: {} })- 由于新版webpack 不在支持CommonsChunkPlugin 所以需要把相关配置进行替换
new webpack.optimize.CommonsChunkPlugin({ ?????name: ‘vendor‘, ?????minChunks: function (module, count) { ???????// 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 ???????) ?????}}),new webpack.optimize.CommonsChunkPlugin({ ?name: ‘manifest‘, ?chunks: [‘vendor‘]})// 把上面的删除了 ?--- 然后在 plugins 的同级 添加optimization: { ???runtimeChunk: { ?????name: ‘manifest‘ ???}, ???splitChunks: { ?????cacheGroups: { ???????commons: { ?????????test: /[\\/]node_modules[\\/]/, ?????????name: ‘vendor‘, ?????????chunks: ‘all‘ ???????} ?????} ???}}// 后面的这个配置如果配置有误会提示 ERROR in chunk 【你的多页面模块名】 [entry] 报错- 安装插件
// 针对代码压缩报错yarn add --dev uglifyjs-webpack-pluginnew webpack.optimize.UglifyJsPlugin({ ?compress: { ???warnings: false ?}, ?sourceMap: true})// 改为const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin‘);new UglifyJsPlugin({ ?uglifyOptions: { ???compress: { ?????warnings: false ???} ???}, ???sourceMap: true})参考资料：
webpack中文网：https://www.webpackjs.com/
npm官网： https://www.npmjs.com/ 查看新安装的包的使用方法
其他博客：...
vue-webpack3x --> webpack4x
原文地址：https://www.cnblogs.com/yejiang1015/p/9091322.html