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. capjoint conversations with Chenweiwen

    This event is quite small for teleseismic stations, which means it will be more strongly affected by ...

  2. angular2架构详解

    参考  http://codin.im/2016/09/18/angular2-architecture-intro/ http://www.tuicool.com/articles/EvEZjmZ ...

  3. Oracle数据库三种备份方案

    Oracle数据库有三种标准的备份方法,它们分别是导出/导入(EXP/IMP).热备份和冷备份.导出备件是一种逻辑备份,冷备份和热备份是物理备份. 一. 导出/导入(Export/Import) 利用 ...

  4. MySQL：安装mysqld系统及基础应用

    MySQL篇 第一章.安装mysqld系统及基础应用 一.安装 注意:mysql的标点符号只能是英文的标点符号. 1.设置配置文件. 文件格式:文本格式 文件位置:Mysql的主目录下 文件名称:my ...

  5. python 正则匹配时间格式转换方法

    import re from datetime import datetime a = '2018年8月9日 10:10' s = re.findall('\d+',a) print(s) d = ' ...

  6. array_reverse（）函数

    $a=array(1,2,4,5,6); print_r(array_reverse($a)); 结果:Array ( [0] => 6                              ...

  7. Vue - iview 开发经验

    Q:打包之后,iview表格宽度异常,过宽或者没有宽度 A:由于columns内某一项width设置为‘百分比(20%)’或者‘100px’导致的, columns内项目的width必须为number ...

  8. Java技术体系

    Shell 解释型编程语言(脚本语言都是解释型语言) Shell通过解释器/bin/bash 解释,运行在进程中 Java 编译型解释型语言(先编译再解释) Java通过编译器转换成字节码语言,再用过 ...

  9. 拿到iframe页面里面的变量及元素的方法

    先严重差评一下,用这种方法window.parent.document.frames['layui-layer-iframe1']不行!而且frames方法存在浏览器不兼容问题(貌似火狐不行) 页面d ...

  10. [转]谈谈 Bias-Variance Tradeoff

    https://liam0205.me/2017/03/25/bias-variance-tradeoff/ 谢谢原作者! 谈谈 Bias-Variance Tradeoff 发表于 2017 年 0 ...