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. ios隐藏头部状态栏级tableview头部控件

    - (BOOL)prefersStatusBarHidden { return YES; } self.tableView.separatorColor = [UIColor colorWithRed ...

  2. python Django rest-framework 序列化步骤

    django-rest-framework,是一套基于Django 的 REST 框架,是一个强大灵活的构建 Web API 的工具包.本文介绍一下 django-rest-framework 的简单 ...

  3. busybox 安装问题解决

    直接编译错误 1.loginutils/passwd.c:93:16: error: storage size of ‘rlimit_fsize’ isn’t known 解决方法:在busybox根 ...

  4. 基于NEO的私链(Private Blockchain)

    1.准备工作 1.NEO-GUI 2.NEO-CLI 3..NET Core Runtime (不能是2.x版本,官方建议是1.12,实际上我用1.14也是没有问题的) 4.四台windows操作系统 ...

  5. 精确率、召回率、准确率与ROC曲线

    精确率表示的是预测为某类样本(例如正样本)中有多少是真正的该类样本,一般用来评价分类任务模型. 比如对于一个分类模型,预测结果为A类的所有样本中包含A0个真正的A样本,和A1个不是A样本的其他类样本, ...

  6. Python学习笔记第二十三周（Flask架构）

    目录: 一.变量引用 内容: 备注:PyCharm小技巧,comm+alt+l  自动修改格式,comm+alt+return  向上添加新行 一.变量引用 1.url生成 from flask im ...

  7. Refused to execute inline event handler because it violates the following Content Security Policy directive: "xxx". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...')

    /********************************************************************************* * Refused to exec ...

  8. golang图片裁剪和缩略图生成

    直接贴代码了 package main import ( "errors" "fmt" "image" "image/gif&qu ...

  9. Java中如何正确的将byte[]数组转化为String类型？

    很多人在编程时,总是喜欢用一下方法将数组转为字符串:(a为byte数组) String s=a.toString(); 可是每次返回的时候,新手看来返回的结果是乱码,比如说我,写RSA算法时,没有注意 ...

  10. nginx安装,配置,并可以放静态文件教程

    简单介绍一下:nginx是一个高性能的HTTP和反向代理的服务器.能有处理最高5,0000的并发量,是新兴的一个代理服务器.中国大陆使用nginx网站用户有:百度.京东.新浪.网易.腾讯.淘宝等. 安 ...