vue-cli webpack 项目版本升级

最新推荐文章于 2025-05-30 16:54:16 发布

转载

最新推荐文章于 2025-05-30 16:54:16 发布 · 6k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c95f9c56fb9a070b96f0f44

文章标签：

#webpack #javascript #json #ViewUI

本文介绍了如何将Vue CLI项目中的Webpack从4升级并进行部分优化，包括使用npm-check-updates工具一键升级package.json，注意不同版本间的依赖适配，替换不支持的extract-text-webpack-plugin为mini-css-extract-plugin，以及升级babel-loader到v8，并调整相关配置。同时，文章提到了多进程打包和图片压缩等优化策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

包含 webpack@4 和 babel-loader@8 以及打包部分优化

一键升级package.json 文件依赖版本数

手动去修改dependencies中各个包的版本号太慢，

so 借助了npm-check-updates工具，一键将package.json中的依赖包版本号更新为最新版本。

1、global install npm install -g npm-check-updates

2、cd 项目目录查看package.json中dependencies的最新版本 ncu

3、更新package.json中dependencies ncu -u

ok package.json中dependencies 就到最新版本了

but 注意版本之间的依赖适配

版本升级

1、webpack@4版本升级

webpack，webpack-cli， webpack-merge， webpack-bundle-analyzer这几个升级

"webpack": "^3.6.0" -> "^4.29.6"
"webpack-bundle-analyzer": "^2.9.0"  -> "^3.1.0"
"webpack-cli": "^3.2.1" -> "^3.3.0"
"webpack-dev-server": "^2.9.7"  ->  "^4.2.1"
复制代码

注意 webpack@4 不支持提取css文件的extract-text-webpack-plugin插件更换成 mini-css-extract-plugin

相应配置更换

build/util.js
1、
// const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

复制代码

2、
// return ExtractTextPlugin.extract({
//     use: loaders,
//     fallback: 'vue-style-loader',
//     publicPath: '../../'
// })
return [MiniCssExtractPlugin.loader].concat(loaders)

复制代码

build/webpack.prod.conf.js

const { VueLoaderPlugin } = require('vue-loader')
plugins: [ new VueLoaderPlugin() ]
复制代码

build/webpack.prod.conf.js

1、
// const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

复制代码

2、plugins 中  new ExtractTextPlugin({  }) 去掉 更换成
new MiniCssExtractPlugin({
    filename: utils.assetsPath(

最低0.47元/天解锁文章

200万优质内容无限畅学