webpack 4 升级点

时间:2022-12-08 09:43:48

webpack 4 升级点:

  • 默认entry为./src,默认output为/dist
  • sideEffects
    在webapck2开始支持ESModule后,webpack提出了tree-shaking进行无用模块的消除,主要依赖ES Module的静态结构。在webapck4之前,主要通过在.babelrc文件中设置"modules": false来开启无用的模块检测,该方法显然比较粗暴。webapck4灵活扩展了如何对某模块开展无用代码检测,主要通过在package.json文件中设置sideEffects: false来告诉编译器该项目或模块是pure的,可以进行无用模块删除。
  • 废弃CommonsChunkPlugin
    webpack4废弃了CommonsChunkPlugin,引入了optimization.splitChunks和optimization.runtimeChunk,旨在优化chunk的拆分。
  • plugin
    内置optimization.minimize来压缩代码,不用再显示引入UglifyJsPlugin;
    废弃CommonsChunkPlugin插件,使用optimization.splitChunks和optimization.runtimeChunk来代替;
    使用optimization.noEmitOnErrors来替换NoEmitOnErrorsPlugin插件
    使用optimization.namedModules来替换NamedModulesPlugin插件
  • loader
    废弃json-loader,友好支持json模块,以ES Moudle的语法引入,还可以对json模块进行tree-shaking处理;

webpack 4 升级点的更多相关文章

  1. webpack 3 升级 webpack4 个人笔记

    参考文章: 1. webpack4升级完全指南 https://segmentfault.com/a/1190000014247030 2. Mobx useStrict is not a funct ...

  2. webpack 3 升级到 webpack 4,遇到问题解决

    报错:Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead 解 ...

  3. webpack(构建一个前端项目)详解--升级

    升级一个正式的项目结构 分离webpack.config.js文件: 新建一个webpack.config.base.js任何环境依赖的wbpack //public webpack const pa ...

  4. 【webpack整理】一、安装、配置、按需加载

    如果你: 是前端热爱者 :) 有JavaScript/nodejs基础 会使用一些常用命令行,mkdir,cd,etc. 会使用npm 想对webpack有更深的认识,或许此时你恰好遇到关于webpa ...

  5. Webpack 3 中的新特性

    本文简短地分享下最新发布的 Webpack 3 中的新特性,供大家参考. 1. Webpack 3 的新特性 6 月 20 日,Webpack 发布了最新的 3.0 版本,并在 Medium 发布了公 ...

  6. 轻松把你的项目升级到PWA

    什么是PWA PWA(Progressive Web Apps,渐进式网页应用)是Google在2015年推出的项目,致力于通过web app获得类似native app体验的网站. 优点 1.无需客 ...

  7. 在找一份相对完整的Webpack项目配置指南么?这里有

    Webpack已经出来很久了,相关的文章也有很多,然而比较完整的例子却不是很多,让很多新手不知如何下脚,下脚了又遍地坑 说实话,官方文档是蛮乱的,而且有些还是错的错的..很多配置问题只有爬过坑才知道 ...

  8. Web 性能优化: 使用 Webpack 分离数据的正确方法

    摘要: Webpack骚操作. 原文:Web 性能优化: 使用 Webpack 分离数据的正确方法 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 制定向用户提供文件的最佳方式可能是一 ...

  9. webpack新版本4.12应用九(配置文件之configuration)

    配置 查看原文|编辑此页 webpack 是需要传入一个配置对象(configuration object).取决于你如何使用 webpack,可以通过两种方式之一:终端或 Node.js.下面指定了 ...

随机推荐

  1. 关于Hibernate 的数据库配置

    <hibernate-configuration>    <session-factory name="mySessionFactory">        ...

  2. 用超链接提交表单,实现在动态网页的url中隐藏参数

    动态网页中怎么隐藏url参数传递 我们在做动态网站的时候往往会在各个页面之间传递参数,而这些参数的名称和值都会在url地址栏中被暴露出来,这样一方面不安全,另一方面也不便于搜索引擎的收录,有的时候还有 ...

  3. eclipse报错 &colon;java was started but returned exit code&equals;13

    一个礼拜没打开自己电脑上的eclipse,一打开居然报错,错误提示如下: cdm运行一下Java -version和javac 运行javac时报错,错误提示如下: 然后发现jdk的bin下没有dt. ...

  4. Xcode配置libdc1394

    libdc1394是一个开源库,提供了一个Mac下完整的1394相机编程接口,这篇文章将介绍Xcode如何配置该库. 步骤: 1.下载libdc1394的源码,并解压 http://damien.do ...

  5. c&plus;&plus; struct 使用

     typedef与结构结合使用 typedef struct tagMyStruct{  int iNum; long lLength;} MyStruct; 这语句实际上完成两个操作: 1) 定义一 ...

  6. Java中多线程的使用!!

    简介:       1.要了解多线程,首先我们得先了解进程和线程.那么什么是进程?进程就是一个正在运行的程序分配内存让应用程序能够运行的叫做进程.那么什么又是线程呢?线程:在一个程序中,负责代码的执行 ...

  7. JavaScript学习心得(六)

    函数 对函数参数没有任何类型检查(弱类型),在必要时在函数内加上类型检查(typeof): JavaScript的函数参数无法设置默认值(可以通过检查参数,当为undefined时设置一个值 func ...

  8. Silverlight将Excel导入到SQLserver数据库

    最近纠结于读取Excel模板数据,将数据导入SQLServer的Silverlight实现,本文将实现代码贴出,作为一个简单的例子,方便各位: 1.先设计前台界面新建Silverlight5.0应用程 ...

  9. struts2框架的登录制作

    首先:我们要建一个web项目 接着: 我们先来导入struts的xml文件 第一步:右击你的项目名,鼠标到MyEclipse会看到一个add struts开头的文件,点开以后看到: 这里我们选择str ...

  10. Inception介绍(MySQL自动化运维工具)

    Inception介绍 GitHub:https://github.com/mysql-inception/inception 文档:https://mysql-inception.github.io ...