vue-cli中webpack从2.x升级到4.x

对vue-cli脚手架的webpack升级

第一步：安装webpack-cli和webpack

npm install webpack-cli -D
npm install webpack@4.26.1 -D

将html-webpack-plugin升级到能够被webpack兼容的版本3.2.0

npm install html-webpack-plugin@3.2.0 -D

第二步： npm run dev启动脚手架在一次报错main.js缺乏babel-loader

::: warning
注意 babel-loader@6.4.1 和 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/_babel-loader@6.4.1@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\_babel-loader@6.4.1@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