webpack5新功能_Webpack 4的新增功能

webpack5新功能

介绍 (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安装它：

• 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.

重要的是要注意，由于现在使用的是现代JavaScript语法，因此使用旧版Webpack的项目可能会降低性能。

提高构建速度 (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的属性，该属性使您可以设置要处理的环境： development或production 。 每个选项都有其自身的优点和用法。

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

将mode设置为development可以通过以下功能为您提供最佳的开发体验，从而使您可以专注于构建：

• 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:

如果未设置mode则webpack始终会引发错误，如下图所示：

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

您可以在webpack.config.js文件中将模式设置为development或production 。

webpack.config.js

webpack.config.js

module.exports = {
    mode: 'development'
}

or

要么

webpack.config.js

webpack.config.js

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而不是进行development或production 。

插件和优化 (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.splitChunks和optimization.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:

Webpack现在支持以下模块类型：

• 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.

此外，将的WebPack寻找的.wasm ， .mjs ， .js并.json顺序扩展。

0CJS (0CJS)

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.

在版本4中，Webpack不再需要webpack.config.js文件。

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()现在支持将webpackInclude和webpackExclude作为魔术注释。 这样可以在使用动态表达式时过滤文件。

• 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.
  UglifyJs现在默认情况下缓存并并行运行。

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

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

结论 (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.
  将WebAssembly支持从实验性移到稳定。

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

webpack5新功能