zoukankan      html  css  js  c++  java
  • 记录一次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版本。

  • 相关阅读:
    linux基础(六) --- 杀死包含应用名称的所有进程
    linux基础(五) ---ubuntu 修改国内源
    linux基础----vim编辑器(三)
    linux基础----vim编辑器(二)
    linux基础----vim编辑器(一)
    计算机基础----必会单词
    支付宝还可以更进一步的改造世界。
    insertAdajcentHTML
    11个触摸设备的触摸时间处理
    手机上的jQuery
  • 原文地址:https://www.cnblogs.com/zhensg123/p/11412679.html
Copyright © 2011-2022 走看看