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