vue-cli中webpack从2.x升级到4.x
对vue-cli脚手架的webpack升级
第一步：安装webpack-cli和webpack
npm install webpack-cli -D
npm install [email protected] -D将html-webpack-plugin升级到能够被webpack兼容的版本3.2.0
npm install [email protected] -D
第二步： npm run dev启动脚手架在一次报错main.js缺乏babel-loader
::: warning
注意 [email protected] 和 webpack4.26.1不兼容报错需要将babel-loader升级到版本7
:::
ERROR Failed to compile with 1 errors 15:05:46
error in ./src/main.js
Module build failed (from ./node_modules/[email protected]@babel-loader/lib/index.js):
TypeError: Cannot read property 'babel' of undefined
at Object.module.exports (C:\Users\admin\Desktop\lvdocument\oasis-vuemodel\node_modules\[email protected]@babel-loader\lib\index.js:103:36)
@ multi ./build/dev-client babel-polyfill ./src/main.js
::: warning
需要在package.json中升级babel-loader
:::
修改版本：
“babel-core”: “^6.26.0” => “babel-core”: “^6.22.1”
“babel-loader”: “^6.2.10” => “babel-loader”: “^7.1.1”
“babel-preset-env”: “^1.6.0” => “babel-preset-env”: “^1.3.2”,
“babel-preset-stage-2”: “^6.24.1” => “babel-preset-stage-2”: “^6.22.0”,
“babel-register”: “^6.26.0” => “babel-register”: “^6.22.0”
保持版本：
“babel-polyfill”: “^6.26.0”
“babel-preset-es2015”: “^6.24.1”,
“babel-plugin-transform-runtime”: “^6.22.0”,
新增版本：
“babel-helper-vue-jsx-merge-props”: “^2.0.3”,
“babel-jest”: “^21.0.2”,
“babel-plugin-dynamic-import-node”: “^1.2.0”,
“babel-plugin-syntax-jsx”: “^6.18.0”
::: tip
在vue-cli工程的根目录下配置.babelrc
:::
{
"presets": [
["env", { "modules": false }],
"stage-2"
],
"plugins": [],
"comments": false,
"compact": false,
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": [ "istanbul" ]
}
}
}
::: warning
在main.js 中你在你的应用入口使用 ES6 的 import 语法，你需要在入口顶部通过 import 将 polyfill 引入，以确保它能够最先加载
:::
::: tip
先npm i然后在启动项目
:::
第三步： npm run dev启动脚手架打包各个文件.js,.vue,.css文件报错的时候出现报错信息
::: danger
原因：vue-loader和webpack版本不兼容
:::
升级版本：
“vue-loader”: “^11.1.4” => “vue-loader”: “^15.7.0”,
“vue-style-loader”: “^2.0.0” => “vue-style-loader”: “^4.1.0”,::: tip
升级后进行npm i 然后重启脚手架
:::
第四步： npm run dev启动脚手架.css，和.vue内部style标签的css样式打包的时候报错
::: danger
原因：css-loader,file-laoder与webpack版本兼容性问题
:::
升级版本：
“css-loader”: “^0.26.4” => “css-loader”: “^1.0.1”,
“file-loader”: “^0.10.0”, => “file-loader”: “^3.0.1”,
::: warning
Vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的
:::
在webpack.base.conf.js需要配置 VueLoaderPlugin
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
plugins: [
new VueLoaderPlugin()
]
}
::: tip
升级后进行npm i 然后重启脚手架
:::
问题
项目启动成功但是页面报错
解决办法：
升级vue-router到2.8.1