zoukankan      html  css  js  c++  java
  • 老vue项目webpack3升级到webpack5全过程记录(二)

    本文接上篇博客记录一些配置的升级过程中遇到的坑。

    1、设置mode

    通过指定mode参数,启用对应环境下webpack内置的优化。有三个可选参数:development,production,none。默认值为production,生产环境在production模式下,会自动压缩代码,可以去除之前配置的一些压缩代码的插件。

    2、use写法不同

    rules 中对loader的指定写法,支持写对象和数组模式

    3、改写file-loader 和 url-loader

    在webpack4前我们对一些静态资源的配置,都是通过file-loader 和 url-loader,webpack5引入资源模块的配置,不需要再配置了

    4、对插件的引用和使用的更改

    merge 的引用改成:

    CopyWebpackPlugin的写法改成:

    分离css的组件改成 mini-css-extract-plugin

    对文件的压缩处理,放在optimization里性能更好

    弃用之前的文件分离,采用新的分离和缓存机制

    CompressionWebpackPlugin的写法改写

    5、报错处理


    出现类似的报错,查出原因是写法不对,版本太低,直接升级对应组件的版本就可以了
    但是后来发现 iview 也有类似的报错,于是痛定思痛一起把iview的版本也升级了。升级iview还是蛮无缝的,目前遇到的不一致的有:
    1、任何使用 from 'iview' 的都要替换为 from 'view-design’
    2、新版的组件默认文字像素大小是14px
    3、tree 的 render自定义写法有区别

    6、结束语

    升级后的构建和打包速度还是很感人的,尽管升级过程中遇到不少细节坑,但是进一步对webpack的配置有了更多理解,还是比较有收获的,如果你的项目打包构建很慢,也是时候更新一把了~~

  • 相关阅读:
    城市的划入划出效果
    文本溢出省略解决笔记css
    长串英文数字强制折行解决办法css
    Poj 2352 Star
    树状数组(Binary Indexed Trees,二分索引树)
    二叉树的层次遍历
    Uva 107 The Cat in the Hat
    Uva 10336 Rank the Languages
    Uva 536 Tree Recovery
    Uva10701 Pre, in and post
  • 原文地址:https://www.cnblogs.com/webhmy/p/14791285.html
Copyright © 2011-2022 走看看