如何将Vue项目从webpack3.x顺利升级到webpack4，避免常见坑点？

本文共计1333个文字，预计阅读时间需要6分钟。

在先前阶段，我将自己的Vue-cli构建的前端框架从webpack 3.x升级到4.x版本。现在，我将简要记录这一过程，并分享一些经验，以免大家走弯路。

首先，环境准备和项目原先是通过Vu进行配置的。

升级步骤如下：

1. 更新项目依赖：将npm或yarn的包升级到Vue-cli 4.x版本。

2.修改webpack配置：根据Vue-cli 4.x的官方文档，更新webpack配置文件。

3.调整Babel配置：更新Babel配置，确保新版本的Babel与Vue-cli 4.x兼容。

4.测试项目：确保所有功能正常运行，无报错。

经验分享：

1. 在升级过程中，注意备份项目配置文件，以免丢失重要信息。

2.仔细阅读Vue-cli 4.x的官方文档，了解新版本的变化和新增特性。

3.与团队分享升级经验和遇到的问题，以便大家共同进步。

总之，Vue-cli 4.x版本相比3.x版本，性能和功能都有了很大提升。希望大家在升级过程中，能够顺利过渡，避免走弯路。

前段时间，泡面将自己的一个Vue-cli构建的前端框架从webpack3.x升级到了4.x版本，现在才拉出来记录一下，已备忘之用，也和大家分享一下，以免大家采坑。

原先的环境

• 项目原先通过Vue-cli 2.9.3 版本构建，原先使用的webpack 3.x版本
• 首先需要对基础包进行更新(package.json)
• webpack 更新到4.x版本，泡面这里更新到了4.28.3
• 更新webpack-dev-server，泡面更新到了3.1.14版本,
• 安装webpack-cli，泡面安装的是3.2.1版本

除了上面的这几个，还需要更新下面几个：

• vue-loader 泡面直接升级到了15版本，
• eslint-loader 升级到了1.7.1,这个当时在做启动的时候提示了一些错误,所以索性也就升级了.
• happypack, 泡面使用了多线程加速,所以这个也必须要升级,否则会报错,泡面更新到了5.0.1
• html-webpack-plugin, 这个也需要更新,否则会提示错误,泡面这里升级到了3.2.0

除了上面几个,还需要额外下载一个:

• mini-css-extract-plugin, 该包是要替换掉extract-text-webpack-plugin来使用,所以后者就遗弃掉了.

接着我们修改一下webpack.base.conf.js,没有使用happypack的这步骤可略过...

泡面这里不知道为什么不能使用happypack来挂载vue-loader,否则会提示错误,所以泡面这里将原先的happypack的配置修改回了原先:

... const vueLoaderConfig = require('./vue-loader.conf') ... module.exports = { ... { test: /\.vue$/, // loader: 'happypack/loader?id=happy-vue' loader: 'vue-loader', options: vueLoaderConfig }, ... }

接着来调整 webpack.dev.conf.js

首先在合并配置的地方引入mode

... // 开发环境引入 mode: 'development', ... module: { ... } devServer: { ... }

webpack4需要手动引入vue-loader插件,因为泡面是从14版本升级到15版本,点我查看官方文档,如何从 v14 迁移,所以这里需要引入:

... const VueLoaderPlugin = require('vue-loader/lib/plugin') ... module.export = { ... plugins: [ ... // 引入vue-loader插件 new VueLoaderPlugin(), ... // 同时,泡面注释掉了vue-loader的happypack // new Happypack({ // id: 'happy-vue', // loaders: [{ // loader: 'vue-loader', // options: vueLoaderConfig // }] // }) ] }

接着, 以下插件被废弃掉了,直接注释掉

• webpack.DefinePlugin
• webpack.NamedModulesPlugin
• webpack.NoEmitOnErrorsPlugin

ok, 这个文件就改完了.

接着来修改webpack.prod.conf.js

同开发环境,需要引入mode和vue-loader,一模一样,所以这里不赘述了.

接着,我们需要在配置表里添加optimization选项:

... output: { ...}, // 这里添加 optimization: { runtimeChunk: { name: 'manifest' }, minimizer: [ new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: config.build.productionSourceMap, uglifyOptions: { warnings: false } }), new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true } }), ], splitChunks:{ chunks: 'async', minSize: 30000, minChunks: 1, maxAsyncRequests: 5, maxInitialRequests: 3, name: false, cacheGroups: { vendor: { name: 'vendor', chunks: 'initial', priority: -10, reuseExistingChunk: false, test: /node_modules\/(.*)\.js/ }, styles: { name: 'styles', test: /\.(scss|css)$/, chunks: 'all', minChunks: 1, reuseExistingChunk: true, enforce: true } } } }, plugins: [...]

接着,我们需要引入mini-css-extract-plugin插件,并添加到插件里:

... const MiniCssExtractPlugin = require('mini-css-extract-plugin') ... plugins: [ ... new MiniCssExtractPlugin({ filename: utils.assetsPath('css/[name].[contenthash].css') }), ... ]

然后, 我们需要把废弃掉的插件注释掉:

webpack.DefinePlugin UglifyJsPlugin (放到optimization里了) ExtractTextPlugin OptimizeCSSPlugin (放到optimization里了) CommonsChunkPlugin (所有的...)

ok, 至此该文件就调整完了.

最后一个utils.js

这里主要是需要添加mini-css-extract-plugin插件

... // 注释掉原来的插件 // const ExtractTextPlugin = require("extract-text-webpack-plugin"); const MiniCssExtractPlugin = require('mini-css-extract-plugin') ... // 找到: // return ExtractTextPlugin.extract({ // use: loaders, // fallback: "vue-style-loader", // publicPath: '../../' // }); // 改为: return [MiniCssExtractPlugin.loader].concat(loaders)

ok, 大功告成! 至此webpack4的配置文件就全部修改完成了.

目前, 泡面至在此记录流水账,回头性能测试再发文章记录.

ps: 如果出现这种错误

error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.

请重新安装一下 vue-template-compiler

总结

以上所述是小编给大家介绍的Vue项目从webpack3.x升级webpack4不完全指南，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的