vue-cli webpack 项目版本升级

包含 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.ass