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版本。

  • 相关阅读:
    ubuntu创建用户命令
    C#图像处理(各种旋转、改变大小、柔化、锐化、雾化、底片、浮雕、黑白、滤镜效果)
    Ubuntu14.04 64bit 编译安装nginx1.7+php5.4+mysql5.6
    ubuntu mysql 远程连接问题解决方法
    如何在LabWIndows/CVI中调用LabVIEW DLL
    NI MAX中缺少串口(转)
    LabWindows/CVI入门之第四章:库文件(转)
    c#中多线程同步Lock(锁)的研究以及跨线程UI的操作 (转)
    C# 实现生产者消费者队列 (转)
    Unity3d基于Socket通讯例子(转)
  • 原文地址:https://www.cnblogs.com/zhensg123/p/11412679.html
Copyright © 2011-2022 走看看