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-cli中webpack从2.x升级到4.x_第1张图片

解决办法:
升级vue-router到2.8.1

你可能感兴趣的:(vue.js,webpack,前端)