一、升级npm run dev

步骤

1、安装webpack webpack-cli

npm i -D webpack@^4.8.3 webpack-cli

参考

https://www.cnblogs.com/zhensg123/p/11412679.html
https://www.jianshu.com/p/feb3156316c1
https://segmentfault.com/a/1190000015237322
2、升级webpack-dev-server

npm i -D webpack-dev-server@^3.1.4

3、升级vue-loader

npm i -D vue-loader@^15.0.0

4、升级html-webpack-plugin

npm i -D html-webpack-plugin@next

修改配置

chunksSortMode: 'auto'

5、升级url-loader和file-loader
删除package.json文件中的url-loader和file-loader

npm i -D url-loader file-loader

6、删除webpack-dashboard
7、更新babel

npm i -D [email protected] @babel/core @babel/preset-env @babel/plugin-transform-runtime  @babel/polyfill

npm i --save @babel/runtime @babel/runtime-corejs2

删除原有的babel-core、 babel-plugin-transform-runtime、babel-preset-stage-2
修改.babelrc文件

{
  "presets": [
    ["@babel/preset-env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
  ],
  "plugins":[
      "transform-vue-jsx",
      [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 2,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

报错

1、compilation.mainTemplate.applyPluginsWaterfall is not a function
或者DeprecationWarning: Tapable.plugin is deprecated. Use new API on.hooksinstead这个错
安装html-webpack-plugin@next
2、Cannot read property 'fileLoader' of undefined
升级url-loader和file-loader到最新版本，webpack4不兼容低版本的file-loader
3、This may cause things to work incorrectly. Make sure to use the same version for both. If you are using vue-loader@>=10.0, simply update vue-template-compiler.
解决方案：
vue与vue-template-compiler版本保持一致
参考：

https://blog.csdn.net/tangkthh/article/details/103717166
https://blog.51cto.com/ji123/2065548
4、node-gyp rebuild
方案一：拷贝可以用的项目的node-gyp文件夹，替换node_moudle文件下的node-gyp
方案二：

  npm install --global --production windows-build-tools
  npm install --global node-gyp

方案三：安装visual studio 2017
网址：https://docs.microsoft.com/zh-cn/visualstudio/productinfo/vs2017-system-requirements-vs

including the "Desktop development with C++" workload.
注意安装时勾选包含c++的桌面开发选项就行安装

npm config set msvs_version 2017

5、Unknown word
style-loader: Adds some css to the DOM by adding a

webpack3迁移到webpack4

一、升级npm run dev

步骤

1、安装webpack webpack-cli

报错