webpack5新功能_Webpack 4的新增功能


介绍 (Introduction)

Webpack is a static module bundler for modern JavaScript applications. It helps to bundle all of the different modules and packages them into one or more bundles.

Webpack是用于现代JavaScript应用程序的静态模块捆绑器。 它有助于捆绑所有不同的模块,并将它们打包成一个或多个捆绑。

This week, Webpack 4 was released, offering new features and improvements. This article explores the new features and improvements in Webpack 4.

本周,发布了Webpack 4,提供了新功能和改进。 本文探讨了Webpack 4中的新功能和改进。

To get started with webpack 4, install in your project using npm:

要开始使用webpack 4,请使用npm在项目中安装:

  • npm install webpack webpack-cli --save-dev

    npm安装webpack webpack-cli --save-dev

You can also install it with Yarn:


  • yarn add webpack webpack-cli --dev

    纱线添加webpack webpack-cli --dev

Node.js支持 (Node.js Support)

Webpack 4 drops support for Node.js 4. This decision was made so as to take advantage of the modern ES6 syntax which results in a more cleaner and stable codebase.

Webpack 4放弃了对Node.js 4的支持。做出此决定是为了利用现代ES6语法,从而使代码库更加简洁和稳定。

It’s important to note that projects using older versions of Webpack might have reduced performance as modern JavaScript syntax is now in use.


提高构建速度 (Increased Build Speed)

Using Webpack 4 now guarantees you up to a 98% decrease in build time for your projects thanks to performance improvements.

现在,由于性能提高,使用Webpack 4可以使您的项目构建时间最多减少98%。

The following images show the build time for a project using Webpack 3 and Webpack 4, respectively:

下图分别显示了使用Webpack 3和Webpack 4的项目的构建时间:

Webpack 3 built the project in 1350 milliseconds. Webpack 4 built the project in 865 milliseconds:

Webpack 3在1350毫秒内完成了该项目。 Webpack 4在865毫秒内完成了该项目:

模式属性 (The Mode Property)

Webpack 4 ships with a property called mode which allows you to set which environment you’re working on: development or production. Each option has its own advantages and usage.

Webpack 4附带了一个名为mode的属性,该属性使您可以设置要处理的环境: developmentproduction 。 每个选项都有其自身的优点和用法。

Setting the mode to development allows you to focus on building by giving you the best development experience with features like:


  • Tooling for browser debugging.

  • Comments, detailed error messages and hints for development are enabled.

  • Fast and optimized incremental rebuilds.


Setting mode to production offers you the best option and defaults needed for deploying your project such as:

production mode设置为production可以为您提供最佳选项和部署项目所需的默认值,例如:

  • Optimizations to generate optimized bundles.

  • Module concatenating (Scope Hoisting).

  • Smaller output size.

  • Exclusion of development-only code.


webpack will always throw an error if the mode has not been set as seen in the following figure:


You can set your mode in the webpack.config.js file to either development or production.


module.exports = {
    mode: 'development'



module.exports = {
    mode: 'production'

The mode property also accepts none instead of development or production if you’d like to do away with the error thrown by Wepback and disable everything.

如果您想消除Wepback引发的错误并禁用所有功能, mode属性也将不接受none而不是进行developmentproduction

插件和优化 (Plugins and Optimizations)

The CommonsChunkPlugin was removed in Webpack 4 and has been replaced with a set of defaults and API called optimization.splitChunks and optimization.runtimeChunk. This means you now get to have shared chunks automatically generated for you. Some other plugins were also deprecated in version 4.

所述CommonsChunkPlugin中的WebPack 4除去并已被替换为一组缺省值和API调用的optimization.splitChunksoptimization.runtimeChunk 。 这意味着您现在可以自动为您生成共享块。 其他一些插件在版本4中也已弃用。

  • NoEmitOnErrorsPlugin was deprecated and is now optimization.noEmitOnErrors. It’s set to on by default in production mode

    NoEmitOnErrorsPlugin已被弃用,现在为optimization.noEmitOnErrors 。 在生产模式下默认设置为打开

  • ModuleConcatenationPlugin was deprecated and is now optimization.concatenateModules. It’s set to on by default in production mode

    不推荐使用ModuleConcatenationPlugin ,现在是optimization.concatenateModules 。 在生产模式下默认设置为打开

  • NamedModulesPlugin was deprecated and is now optimization.namedModules. It’s set to on by default in production mode

    不建议使用NamedModulesPlugin,现在为optimization.namedModules 。 在生产模式下默认设置为打开

In a bid to improve performance and get the best optimizes, UglifyJs now caches and parallizes by default in webpack 4.

为了提高性能并获得最佳的优化,UglifyJs现在默认在webpack 4中缓存和并行化。

新模块类型 (New Module Types)

Webpack now supports these module types:


  • javascript/auto: (The default in webpack 3) Javascript module with all module systems enabled: CommonJS, AMD, ESM

    javascript / auto :(webpack 3中的默认设置)启用了所有模块系统的Javascript模块:CommonJS,AMD,ESM

  • javascript/esm: EcmaScript modules, all other module system are not available

    javascript / esm:EcmaScript模块,所有其他模块系统均不可用

  • javascript/dynamic: Only CommonJS and, EcmaScript modules are not available

    javascript / dynamic :仅CommonJS和EcmaScript模块不可用

  • json: JSON data, it’s available via require and import

    json :JSON数据,可通过require和import获得

  • webassembly/experimental: WebAssembly modules (currently experimental)

    webassembly / experimental :WebAssembly模块(目前处于实验阶段)

javascript/auto used to be the default module in Webpack 3, but Webpack 4 completely abstracted the JavaScript specificity from the code base to allow for this change so that users can specify the kind of module they want.

javascript/auto曾经是Webpack 3中的默认模块,但是Webpack 4从代码库中完全提取了JavaScript的特殊性,以允许进行此更改,以便用户可以指定所需的模块类型。

Also, Webpack will look for the .wasm, .mjs, .js and .json extensions in this order.



0CJS means a Zero Config app. It’s the idea that you need the minimum or zero config to get a JavaScript project up and running. That’s the premise the relatively new bundler, Parcel also runs on. You don’t need a configuration file to get started building your app.

0CJS表示零配置应用程序。 这个想法是您需要最小或零的配置才能启动和运行JavaScript项目。 这是相对较新的打包机( Parcel)也要运行的前提。 您不需要配置文件即可开始构建应用程序。

With version 4, Webpack no longer requires a webpack.config.js file.


All you need to do is have a ./src/index.js file. Whenever you run the webpack command in the terminal, Webpack knows to use that file as the entry point for the application. This might come in handy for small projects.

您需要做的只是创建一个./src/index.js文件。 每当您在终端中运行webpack命令时,Webpack就会知道使用该文件作为应用程序的入口点。 对于小型项目,这可能会派上用场。

其他更新 (Other Updates)

  • Dead branches are now removed by Webpack itself. This was done by Uglify before but Webpack is responsible for removing dead code now.

    死分支现在已由Webpack本身删除。 这是以前由Uglify完成的,但Webpack现在负责删除无效的代码。
  • import() now supports webpackInclude and webpackExclude as a magic comment. This allows filtering files when using a dynamic expression.

    import()现在支持将webpackIncludewebpackExclude作为魔术注释。 这样可以在使用动态表达式时过滤文件。

  • Using System.import() in your code now emits a gentle warning. import() is advised.

    现在,在代码中使用System.import()会发出警告。 建议使用import()

  • UglifyJs now caches and runs in parallel by default.

  • script tags no longer use text/javascript and async as this are the default values. This saves a few bytes.

    脚本标记不再使用text/javascriptasync因为这是默认值。 这样可以节省一些字节。

结论 (Conclusion)

These are just some of the many features that are in webpack 4. There are still so many updates and improvement to look forward to such as:

这些只是webpack 4中的许多功能中的一部分。仍有许多更新和改进值得期待,例如:

  • HTML/CSS modules. This means you can use an HTML/CSS file as an entry point.

    HTML / CSS模块。 这意味着您可以将HTML / CSS文件用作入口点。
  • Persistent Caching.

  • Multi-threading and Multicore.

  • Move WebAssembly support from experimental to stable.


You can check out the full release log for webpack 4 here.

您可以在此处查看webpack 4的完整发布日志。

翻译自: https://www.digitalocean.com/community/tutorials/whats-new-in-webpack-4


参与评论 您还未登录,请先 登录 后发表或查看评论


  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
钱包余额 0