记录一次webpack3升级到webpack4过程

       升级以前也参考了一些网上的教程。借鉴之，进行的本身的升级。一些版本为何设为那个版本号也是参考别人的结果。

       总体是按照先升级npm run dev；在升级npm run build的顺序。

       首先升级webpack，在package.json文件中将webpack版本号修改成4.8.1。

    "webpack": "^4.8.1",

　　以后npm run dev，报错

     解决的办法是

"webpack-dev-server": "^3.1.4",

　继续npm run dev 

    很明显这是没有安装webpack-cli，安装webpack

"webpack-cli": "^3.3.7",

　 继续npm run dev

      由于项目运用了DllReferencePlugin，升级以后须要从新生成dll文件。以后由于webpack4自身已经移除了uglifyjsplugin因此不能用了，改用下面插件进行代码压缩。

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

　　修复后，npm run dev

       解决方案升级 html-webpack-plugin

"html-webpack-plugin": "^3.2.0",

      webpack4 须要使用vue-loader 15.0.0 至少。因此升级vue-loader

"vue-loader": "^15.0.10",

　  注意vue-loader须要以插件的形式写在webpack配置项plugin里面。

const { VueLoaderPlugin } = require('vue-loader')
webpack:{
  ....,
 plugins: [
    new VueLoaderPlugin(),
    .....
   ]
}

　ok,npm run dev升级完毕。

    注意这里版本号虽然，如上来写，但须要刘杰"^"这个符号的意义，意义是大版本号不变，中间版本号会自动下载最新的。还有一个符号"~",是只小版号变化。

    而后升级npm run build。

    webpack 4 不能再用extract-text-webpack-plugin，大多数教程推荐使用mini-css-extract-plugin，这个能够百度。用这个插件替换build环境的extract-text-webpack-plugin便可。

    其余：升级过程当中还出现的问题有

      这是由于eslint须要升级，升级到eslint-loader

 "eslint-loader": "^2.0.0",

　　

      这是由于使用了elment-ui，当升级到2.11.x时候会出现这个错误，这个错误最终没有解决， 只有降级element-ui版本。