1. babel升级
(1)卸载babel-core,重新安装@babel/core
npm uninstall babel-core
npm i -D @babel/core // 重新安装babel7的core
npm i -D babel-loader@8.1.0 // babel7需要babel-loader8以上的版本,否则报错
npm i -D @babel/polyfill
npm i -D @babel/runtime
npm i -D @babel/plugin-transform-runtime
npm i -D @babel/preset-env
(2)删除stage,presets 废弃 stage-0、stage-1、stage-2、stage-3,使用 @babel/preset-env 代替所有预设配置项,包含基础的es5代码的转换规则插件
npm uninstall babel-preset-env
npm i @babel/preset-env
npm uninstall babel-preset-stage-2
删除所有babel-plugin-*,换成@babel/plugin-*,其他的功能以插件的形式引入,如@babel/plugin-proposal-decorators试试
(3)配置.babelrc.js
// .babelrc.js
{
"presets": [
["@babel/preset-env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
},
"corejs": "2",
"useBuiltIns": "usage"
}]
],
"plugins": [
"transform-vue-jsx",
"@babel/plugin-transform-runtime",
["component",
{
"libraryName": "mint-ui",
"style": true
}
]
]
}
(4) 删掉 babel-polyfill
npm uninstall babel-polyfill
并删除项目中所有引入的import 'babel-polyfill'
我的项目中发现的有:
webpack的配置项中entry中删除:'babel-polyfill'
main.js中删除import 'babel-polyfill'
启动项目试试,再根据报错做相应修改。
webpack3升4
(1)基础版本更新
npm i webpack@4.28.3 webpack-dev-server@3.1.14 webpack-cli@3.2.1
npm i vue-loader@15.10.0 eslint-loader@4.0.2 html-webpack-plugin@3.2.0
npm i mini-css-extract-plugin@2.6.1
(2)webpack.dev.conf.js调整
...
// 开发环境引入
mode: 'development',
...
module: {
...
}
devServer: {
...
}
引入vue-loader
...
const VueLoaderPlugin = require('vue-loader/lib/plugin')
...
module.export = {
...
plugins: [
...
// 引入vue-loader插件
new VueLoaderPlugin(),
...
]
}
接着, 以下插件被废弃掉了,直接注释掉
- webpack.NamedModulesPlugin
- webpack.NoEmitOnErrorsPlugin
(3)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')
}),
...
]
注释掉废弃的插件:
- UglifyJsPlugin (放到optimization里了)
- ExtractTextPlugin
- OptimizeCSSPlugin (放到optimization里了)
- CommonsChunkPlugin (所有的…,变成使用optimization。splitChunks了)
(4)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)
(5)解决各个组件库不适配问题
由于项目是老项目,前人使用了组件库mui/mint-ui/vux/vant以及jQuery。
a.首先解决vux的问题,vux的vux-loader
针对webpack4的升级推出了@vux/loader
,用法和原来类似,所以只替换引入就行
npm uninstall vux-loader
npm install @vux/loader --save
//const vuxLoader = require('vux-loader')
const vuxLoader = require('@vux/loader')
b. 因为mui.js里面有不严格模式,用而webpack打包默认使用严格模式,所以需要取消webpack的严格模式(毕竟把第三方组件改成严格模式更麻烦)
npm install -D @babel/plugin-transform-modules-commonjs @babel/plugin-transform-strict-mode
babel中添加 ["@babel/plugin-transform-modules-commonjs", { "strictMode": false }]
"plugins": [
"transform-vue-jsx",
"@babel/plugin-transform-runtime",
["@babel/plugin-transform-modules-commonjs", { "strictMode": false }],
]
c. mint-ui在项目启动过程中没有报错,但在浏览器控制台一直出现:_loadmore is not defined
类似报错,因为项目中在main.js中通过按需引入了loadmore组件。
// Vue.component(Loadmore.name, Loadmore)
Vue.use(Loadmore)
通过Vue.use
替换Vue.component
方式解决了这个问题。
在组件中import { MessageBox } from 'mint-ui'
还是会报错MessageBox is not defined
,只能放弃按需引入改成全部引入,后来觉得全部引入代价太大,只能将MessageBox
统一换成了vant的Dialog
d. jquery的引入也报错了"export 'default' (imported as '$') was not found in '../../../static/js/jquery.min.js
// import $ from '../../../static/js/jquery.min.js'
import * as $ from '../../../static/js/jquery.min.js'
e. swiper打包完报错:new Swiper.default is not constructor
修改swiper引入
// import Swiper from 'swiper'
import Swiper from 'swiper/dist/js/swiper'
f. Cannot find module ‘webpack/bin/config-yargs’
webpack-cli要安装3x版本,4x版本把这个给去掉了
npm i webpack-cli@3 -D
g. Cannot find module ‘vue-loader/lib/plugin’
npm i vue-loader@15.7.0 -D
h. TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function
是html-webpack-plugin·版本不兼容问题
npm i html-webpack-plugin@3 -D
i. TypeError: Cannot read property ‘eslint’ of undefined
npm i eslint-loader@2 -D
g. Duplicate plugin/preset detected
检查babelrc或babelconfig里有没有重复定义的