🚀webpack 4 beta — try it today!🚀

Now that webpack is a #0CJS (Zero Configuration) out-of-the-box bundler, we will lay groundwork in 4.xand 5.0 to provide more default capabilities down the road.

💪Better Defaults — mode

You have to choose (modeor --mode) between two modes now: “production”or “development”.

  • Production Mode enables all sorts of optimizations out of the box for you. This includes, minification, scope hoisting, tree-shaking, side-effect-free module pruning, and includes plugins you would have to manually use like NoEmitOnErrorsPlugin.
  • Development Mode optimized for speed and developer experience. In the same way, we automatically include features like path names in your bundle output, eval-source-maps, that are meant for easy-to-read code, and fast build times!

🍰sideEffects — Huge win for bundle sizes

We introduced support for sideEffects: falsein package.json. When this field is added, it signals to webpack that there are no sideEffects in the library being consumed. This means that webpack can safely eliminate any used re-exports from your code.

For example, importing only as single__export_from lodash-eswould cost ~223 KiB [minified]. _In webpack 4, this cost is now ~3 KiB!!!

We originally called this feature “pure-module”. This is now called “sideEffects”

🌳JSON Support & Tree Shaking

When you importJSON with ESModule syntax, webpack will eliminate unused exports from the “JSON Module”. For those who are already importing JSON into your code with lot’s of unused pieces, you should seea significant size decrease in your bundle sizes.

😍Upgrade to UglifyJS2

This means that you can use ES6 Syntax, minify it, without a transpiler first.

We would like to thank the UglifyJs2 team of contributors for the selfless and hard work they have done to land ES6 support. This was no easy task and we’d love for you tostop by their repository and express your appreciation and support.

UglifyJS2 now supports ES6 JavaScript syntax!

🐐 Module Type’s Introduced + .mjs support

Historically, JavaScript has been the only first-class module type in webpack. This caused a lot of awkward pains for users where they would not be able to effectively have CSS/HTML Bundles, etc. We have completely abstracted the JavaScript specificity from our code base to allow for this new API. Currently built, we now have 5 module types implemented:

  • javascript/auto: (The default one inwebpack 3__)Javascript module with all module systems enabled: CommonJS, AMD, ESM
  • javascript/esm: EcmaScript modules, all other module system are not available (the default for .mjs files)
  • javascript/dynamic: Only CommonJS and, EcmaScript modules are not available
  • json: JSON data, it’s available via require and import (the default for .json files)
  • webassembly/experimental: WebAssembly modules (currently experimental and the default for .wasm files)
  • In addition webpack now looks for the .wasm.mjs.jsand .jsonextensions in this order to resolve

What’s most exciting about this feature, is that now we can continue to work on our CSS and HTML module types (4.x).This would allow capabilities like HTML as your entry-point!

🔬WebAssembly Support

Webpack now by default supports importand exportof any local WebAssembly module. This means that you can also write loaders that allow you to importRust, C++, C and other WebAssembly host lang files directly:

💀Goodbye CommonsChunkPlugin

We have also removed CommonsChunkPluginand enabled many of its features by default. In addition, for those who need fine-grained control over their caching-strategy, we have added optimization.splitChunksand optimization.runtimeChunkwith a richer, more flexible set of capabilities

💖And so much more!

There are so many more features that we heavily recommend you check them all outon our official change log.

⌚The clock starts now

As promised, we will wait a month from today before releasing webpack 4 stable.This gives our plugin, loaders, and integrations ecosystem time to test, report, and upgrade to webpack 4.0.0!

We need you to help us upgrade and test this beta. The more we can have testing it today, the faster we can help triage and identify any issues that could come up down the road!

Thank you so much to all of our contributors who have helped make wepback 4 what it is today. As we always say, webpack’s power is the sum of our parts and ecosystem.




  • 🔥基于vue3.0.1 beta搭建仿京东淘宝的电商商城项目!

    前言 就在前段时间,vue官方发布了3.0.0beta.1 版本,趁着五一假期有时间,就把之前的一个电商商城的项目,用最新的Composition API拿来改造一下! 👉GitHub地址请访问🔗...

    1 个月前
  • 黑魔法之 CSS Entry

    大家都知道 webpack 的 Entry 都是 js,如果想输出 css 文件只能在 js 文件里导入 css,所以很多人都会想要是 entry 也可以是 css 那多好,这样就可以任意输出 cs...

    2 年前
  • 的pastrykit框架是什么?


    2 年前
  • 浅谈Retry设计模式及在前端的应用与实现

    引子 当一个网页刷不出来的时候,我们常常会本能得刷新一下。这就是一个最简单的 retry (重试)。有时重试一次就加载成功了,有时需要几次,有时需要隔半个小时再来尝试,有时再怎么尝试也没有用。

    1 个月前
  • 我们开发者有自己的导航网站啦 wanghang.com.cn Beta版正式上线

    一直想把本地自己用的导航发布到线上,由于自身UI不过关,长期以来只是停留在“筹备”之中 ̄▽ ̄。最近把界面简单做了一下美化,正式发布上来了,不过是简化版本,有许模块没有加入其中,后期会陆续更新,敬请期待...

    1 年前
  • 慎用try catch

    前言 ECMA262第3版引入了语句,作为JavaScript中处理异常的一种标准方式。基本的语法如下所示。 但是在前端代码中很少看到语句,并不是所以代码都需要加来作得不偿失的“保险”,下面来分析...

    1 年前
  • 开始使用sentry

    sentry简介 Sentry 是一个开源的错误追踪工具,可以帮助开发人员实时监控和修复系统中的错误。其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言(JS/Java/Pyth...

    5 个月前
  • 尤雨溪在 vue3.0 beta 上推荐的 no webpack 小工具 vite

    (/public/upload/0b60eddd90ad82fe6806f02321143f4c) 前言 在4月21日晚,Vue作者尤雨溪在哔哩哔哩直播分享了Vue.js 3.0 Beta最新...

    1 个月前
  • 小程序框架mpvue中每个页面都需要创建main.js,为了解决这个重复的工作配置mpvue-entry

    最近工作中使用到了mpvue框架搭建小程序,由于mpvue是基于vue.js的框架,所以上手也很简单,但是还有一些地方用起来不顺手。 初始化一个 mpvue 项目 按照官网提供的步骤执行下去就可以了 ...

    1 个月前
  • 实例解析JavaScript中try、catch、finally的执行规则

    try:  语句测试代码块的错误,一般把可能会出错的代码放到这里 catch: 只有try里面的代码块发生错误时,才会执行这里的代码,参数err记录着try里面代码的错误信息 finall...

    3 年前


扫码加入 JavaScript 社区