From 414c305bebf63e75b1b8995c025273dc40d06c35 Mon Sep 17 00:00:00 2001 From: wangyage Date: Wed, 24 Jun 2020 10:14:51 +0800 Subject: [PATCH 1/8] =?UTF-8?q?diff:=E6=A0=BC=E5=BC=8F=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/migrate/3.md | 196 +++++++++++++++++++-------------------- 1 file changed, 98 insertions(+), 98 deletions(-) diff --git a/src/content/migrate/3.md b/src/content/migrate/3.md index 05152b2f7bd5..d88cddd02c03 100644 --- a/src/content/migrate/3.md +++ b/src/content/migrate/3.md @@ -18,14 +18,14 @@ contributors: - byzyk --- -The following sections describe the major changes from webpack 1 to 2. +下面的部分描述了从 webpack 1 到 webpack 2 的主要变化。 -T> Note that there were far fewer changes between 2 and 3, so that migration shouldn't be too bad. If you are running into issues, please see [the changelog](https://github.com/webpack/webpack/releases) for details. +T> 注意,webpack 2 和 3 之间的变化很少,所以升级迁移起来不会太糟。如果遇到问题,详情请参阅 [the changelog](https://github.com/webpack/webpack/releases) 。 ## `resolve.root`, `resolve.fallback`, `resolve.modulesDirectories` -These options were replaced by a single option `resolve.modules`. See [resolving](/configuration/resolve) for more usage. +使用一个`resolve.modules`配置替换了下面这些配置项。更多用法请参阅 [resolving](/configuration/resolve)。 ``` diff resolve: { @@ -40,19 +40,19 @@ These options were replaced by a single option `resolve.modules`. See [resolving ## `resolve.extensions` -This option no longer requires passing an empty string. This behavior was moved to `resolve.enforceExtension`. See [resolving](/configuration/resolve) for more usage. +这个配置在使用时不再需要传入一个空字符串,该配置已迁移至 `resolve.enforceExtension` 。更多用法请参阅[resolving](/configuration/resolve)。 ## `resolve.*` -Several APIs were changed here. Not listed in detail as it's not commonly used. See [resolving](/configuration/resolve) for details. +有一些 API 发生了改变。因为不常用在这里没有详细列出。更多细节请参阅[resolving](/configuration/resolve)。 -## `module.loaders` is now `module.rules` +## `module.loaders` 升级为 `module.rules` -The old loader configuration was superseded by a more powerful rules system, which allows configuration of loaders and more. -For compatibility reasons, the old `module.loaders` syntax is still valid and the old names are parsed. -The new naming conventions are easier to understand and are a good reason to upgrade the configuration to using `module.rules`. +旧的 loader 配置被一个更强大的规则系统取代,该系统除了允许配置 loader 还支持其他更多配置。 +考虑到兼容性,系统仍然支持解析旧的配置项,也可以使用旧的配置 `module.loaders` 。 +新的配置命名很容易理解,这也不失为一个好的理由升级使用新的配置 `module.rules` 。 ``` diff module: { @@ -77,7 +77,7 @@ The new naming conventions are easier to understand and are a good reason to upg }, { test: /\.jsx$/, - loader: "babel-loader", // Do not use "use" here + loader: "babel-loader", // 在这里不要使用 'use' options: { // ... } @@ -87,11 +87,11 @@ The new naming conventions are easier to understand and are a good reason to upg ``` -## Chaining loaders +## 链式 loaders -Like in webpack 1, loaders can be chained to pass results from loader to loader. Using the [rule.use](/configuration/module/#ruleuse) - configuration option, `use` can be set to an array of loaders. -In webpack 1, loaders were commonly chained with `!`. This style is only supported using the legacy option `module.loaders`. +和 webpack 1 一样,loaders 支持将执行结果从一个 loader 传递给 下一个 loader 的串行链式调用。 +使用[rule.use](/configuration/module/#ruleuse) 配置项, `use` 支持配置 loaders 数组。 +在 webpack 1 中,多个 loaders 的串联都是用 `!` 。只有在`module.loaders` 中才支持这种写法。 ``` diff module: { @@ -109,9 +109,9 @@ In webpack 1, loaders were commonly chained with `!`. This style is only support ``` -## Automatic `-loader` module name extension removed +## 已移除 `-loader` 模块名称自动扩展 -It is not possible anymore to omit the `-loader` extension when referencing loaders: +在引用 loaders 时,不能再使用 `-loader` 自动扩展: ``` diff module: { @@ -130,7 +130,7 @@ It is not possible anymore to omit the `-loader` extension when referencing load } ``` -You can still opt-in to the old behavior with the `resolveLoader.moduleExtensions` configuration option, but this is not recommended. +你可以通过 `resolveLoader.moduleExtensions` 继续使用这种低版本的配置形式,但是官方不推荐。 ``` diff + resolveLoader: { @@ -138,13 +138,13 @@ You can still opt-in to the old behavior with the `resolveLoader.moduleExtension + } ``` -See [#2986](https://github.com/webpack/webpack/issues/2986) for the reason behind this change. +具体原因请参阅 [#2986](https://github.com/webpack/webpack/issues/2986) 。 -## `json-loader` is not required anymore +## 不再需要强制引入 `json-loader` -When no loader has been configured for a JSON file, webpack will automatically try to load the JSON -file with the [`json-loader`](https://github.com/webpack-contrib/json-loader). +当用户没有配置解析 JSON 文件的配置项时,webpack 会自动使用[`json-loader`](https://github.com/webpack-contrib/json-loader) +解析 JSON 文件。 ``` diff module: { @@ -157,8 +157,8 @@ file with the [`json-loader`](https://github.com/webpack-contrib/json-loader). } ``` -[We decided to do this](https://github.com/webpack/webpack/issues/3363) in order to iron out environment differences - between webpack, node.js and browserify. +[我们决定这样做](https://github.com/webpack/webpack/issues/3363) +是为了消除 webpack、nodejs、browserify 之间的环境差异。 ## Loaders in configuration resolve relative to context @@ -185,7 +185,7 @@ You may remove some hacks to work around this: ``` -## `module.preLoaders` and `module.postLoaders` were removed: +## 移除了 `module.preLoaders` 和 `module.postLoaders` : ``` diff module: { @@ -203,7 +203,7 @@ You may remove some hacks to work around this: ## `UglifyJsPlugin` sourceMap -The `sourceMap` option of the `UglifyJsPlugin` now defaults to `false` instead of `true`. This means that if you are using source maps for minimized code or want correct line numbers for uglifyjs warnings, you need to set `sourceMap: true` for `UglifyJsPlugin`. + `UglifyJsPlugin` 配置中的 `sourceMap` 选项默认设置为 false 替代之前的默认值 `true` 。这就意味着如果你想要在压缩过的代码中使用 source maps 或者 想要看到正确的行号,你需要在 `UglifyJsPlugin` 配置中设置 `sourceMap: true` 。 ``` diff devtool: "source-map", @@ -215,10 +215,10 @@ The `sourceMap` option of the `UglifyJsPlugin` now defaults to `false` instead o ``` -## `UglifyJsPlugin` warnings +## `UglifyJsPlugin` 警告提示 -The `compress.warnings` option of the `UglifyJsPlugin` now defaults to `false` instead of `true`. -This means that if you want to see uglifyjs warnings, you need to set `compress.warnings` to `true`. + `UglifyJsPlugin` 配置中 `compress.warnings` 选项默认设置为 `false` 替代之前的默认值 `true` 。 + 这就意味着如果你想看到 uglifyjs 静态提示,你需要设置 `compress.warnings` 为 `true` 。 ``` diff devtool: "source-map", @@ -232,13 +232,13 @@ This means that if you want to see uglifyjs warnings, you need to set `compress. ``` -## `UglifyJsPlugin` minimize loaders +## `UglifyJsPlugin` 压缩优化 loaders -`UglifyJsPlugin` no longer switches loaders into minimize mode. The `minimize: true` setting needs to be passed via loader options in the long-term. See loader documentation for relevant options. +`UglifyJsPlugin` 不再压缩优化代码。长期而言需要设置 loader 的配置项 `minimize: true` 。其他相关配置项请参阅 loader 配置文档。 -The minimize mode for loaders will be removed in webpack 3 or later. +在 webpack 3 或者之后的版本中,将会移除 loader 压缩优化的代码。 -To keep compatibility with old loaders, loaders can be switched to minimize mode via plugin: +为了兼容低版本的 loaders,可以使用插件将 loaders 转换为最小化模式。 ``` diff plugins: [ @@ -249,14 +249,14 @@ To keep compatibility with old loaders, loaders can be switched to minimize mode ``` -## `DedupePlugin` has been removed +## 已经移除 `DedupePlugin` -`webpack.optimize.DedupePlugin` isn't needed anymore. Remove it from your configuration. +已经不再需要 `webpack.optimize.DedupePlugin` 。请在你的配置中移除这个配置项。 -## `BannerPlugin` - breaking change +## `BannerPlugin` - 突破性改变 -`BannerPlugin` no longer accepts two parameters, but a single options object. +`BannerPlugin` 不再需要配置两个参数,直接使用一个配置项对象。 ``` diff plugins: [ @@ -266,10 +266,10 @@ To keep compatibility with old loaders, loaders can be switched to minimize mode ``` -## `OccurrenceOrderPlugin` is now on by default +## `OccurrenceOrderPlugin` 默认生效 -The `OccurrenceOrderPlugin` is now enabled by default and has been renamed (`OccurenceOrderPlugin` in webpack 1). -Thus make sure to remove the plugin from your configuration: + `OccurrenceOrderPlugin` 配置现在默认生效并且已经重新更正过配置名(在webpack 1 中是 `OccurenceOrderPlugin`)。 +因此请确保在你的配置项中移除这个插件的调用: ``` diff plugins: [ @@ -281,13 +281,13 @@ Thus make sure to remove the plugin from your configuration: ``` -## `ExtractTextWebpackPlugin` - breaking change +## `ExtractTextWebpackPlugin` - 突破性改变 -[ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) requires version 2 to work with webpack 2. +在 webpack 2 中需要引入 [ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) 的版本 2 。 `npm install --save-dev extract-text-webpack-plugin` -The configuration changes for this plugin are mainly syntactical. +这个插件配置的改变主要是语法方面。 ### `ExtractTextPlugin.extract` @@ -322,17 +322,17 @@ plugins: [ ``` -## Full dynamic requires now fail by default +## 全量动态的 requires 引入默认失败 -A dependency with only an expression (i. e. `require(expr)`) will now create an empty context instead of the context of the complete directory. +现在只有一个表达式的依赖(例如: `require(expr)`) 将会创建一个空的上下文,代替一个完全目录的上下文。 -Code like this should be refactored as it won't work with ES2015 modules. If this is not possible you can use the `ContextReplacementPlugin` to hint the compiler towards the correct resolving. +像这样的代码在 es2015 语法的模块里无法解析执行,所以需要重构。如果还是不行,你可以使用 `ContextReplacementPlugin` 提示编译器以正确的方式解析。 -?> Link to an article about dynamic dependencies. +?> 动态依赖文章的链接占位 -### Using custom arguments in CLI and configuration +### 在脚手架和配置中使用自定义参数 -If you abused the CLI to pass custom arguments to the configuration like so: +如果你不再像下面这样在 CLI 中传递自定义参数: `webpack --custom-stuff` @@ -343,9 +343,9 @@ var customStuff = process.argv.indexOf('--custom-stuff') >= 0; module.exports = config; ``` -You may notice that this is no longer allowed. The CLI is more strict now. +你可能注意到已经不允许自定义传递参数了。CLI 现在更加严格了。 -Instead there is an interface for passing arguments to the configuration. This should be used instead. Future tools may rely on this. +相反会有接口支持传递参数到配置中。应该使用这种接口。未来的工具可能就依赖这个接口传参。 `webpack --env.customStuff` @@ -357,19 +357,19 @@ module.exports = function(env) { }; ``` -See [CLI](/api/cli). +请参阅 [CLI](/api/cli)。 -## `require.ensure` and AMD `require` are asynchronous +## `require.ensure` 和 AMD `require` 都是异步的 -These functions are now always asynchronous instead of calling their callback synchronously if the chunk is already loaded. +这些方法现在都已经是异步请求了,代替了chunk下载完成之后同步调用回调的方式。 -__`require.ensure` now depends upon native `Promise`s. If using `require.ensure` in an environment that lacks them then you will need a polyfill.__ +__`require.ensure` 现在依赖原生的 `Promise`s 。如果在一个不支持的环境中使用 `require.ensure` ,需要 polyfill.__ 支持。 -## Loader configuration is through `options` +## 在 `options` 中配置 Loader -You can _no longer_ configure a loader with a custom property in the `webpack.config.js`. It must be done through the `options`. The following configuration with the `ts` property is no longer valid with webpack 2: +在 `webpack.config.js` 中,你不再需要通过自定义属性配置 loader 。必须在 `options` 中配置 loader 。下面 `ts` 相关的配置已经在 webpack 2 中不再起作用。 ```js module.exports = { @@ -380,15 +380,15 @@ module.exports = { loader: 'ts-loader' }] }, - // does not work with webpack 2 + // 在 webpack 2 中不起作用 ts: { transpileOnly: false } }; ``` -### What are `options`? +### 什么是 `options` ? -Good question. Well, strictly speaking it's 2 possible things; both ways to configure a webpack loader. Classically `options` was called `query` and was a string which could be appended to the name of the loader. Much like a query string but actually with [greater powers](https://github.com/webpack/loader-utils#parsequery): +好问题。严格的来说这是两种可能性。都是配置 webpack loader 的方式。一般来说, `options` 被称为 `query` ,是紧跟在 loader 后面的字符串。像一个查询字符串但其实有 [更强大的作用](https://github.com/webpack/loader-utils#parsequery): ```js module.exports = { @@ -402,7 +402,7 @@ module.exports = { }; ``` -But it can also be a separately specified object that's supplied alongside a loader: +但是它也可以是一个在 loader 之外单独指定的对象: ```js module.exports = { @@ -418,11 +418,11 @@ module.exports = { ``` -## `LoaderOptionsPlugin` context +## `LoaderOptionsPlugin` 上下文 -Some loaders need context information and read them from the configuration. This needs to be passed via loader options in the long-term. See loader documentation for relevant options. +有一些 loaders 需要从配置中获取上下文信息。长期来看,这些信息需要通过 loader 配置项传入。更多相关配置项请参阅 loader 文档。 -To keep compatibility with old loaders, this information can be passed via plugin: +为了兼容低版本 loaders ,这些信息也可以通过插件传入: ``` diff plugins: [ @@ -437,11 +437,11 @@ To keep compatibility with old loaders, this information can be passed via plugi ## `debug` -The `debug` option switched loaders to debug mode in webpack 1. This needs to be passed via loader options in long-term. See loader documentation for relevant options. +在 webpack 1 中 `debug` 选项可以设置 loaders 为 debug 模式。长期来看,这些信息需要通过 loader 配置项传入。更多相关配置项请参阅 loader 文档。 -The debug mode for loaders will be removed in webpack 3 or later. +在 webpack 3 或者 之后的版本中,loaders 的 debug 模式将会被移除。 -To keep compatibility with old loaders, loaders can be switched to debug mode via a plugin: +为了兼容低版本 loaders ,可以通过插件将 loaders 切换到 debug 模式: ``` diff - debug: true, @@ -455,7 +455,7 @@ To keep compatibility with old loaders, loaders can be switched to debug mode vi ## Code Splitting with ES2015 -In webpack 1, you could use [`require.ensure()`](/api/module-methods/#requireensure) as a method to lazily-load chunks for your application: +在 webpack 1 中,你可以在应用中使用 [`require.ensure()`](/api/module-methods/#requireensure) 来懒加载代码段。 ```javascript require.ensure([], function(require) { @@ -463,7 +463,7 @@ require.ensure([], function(require) { }); ``` -The ES2015 Loader spec defines [`import()`](/api/module-methods/#import-1) as method to load ES2015 Modules dynamically on runtime. webpack treats `import()` as a split-point and puts the requested module in a separate chunk. `import()` takes the module name as argument and returns a Promise. +es2015 loader 特别定义了 [`import()`](/api/module-methods/#import-1) 作为运行时动态加载 es2015 模块的方法。 webpack 将 `import()` 作为一个代码拆分的点,并且将这些必需的模块放在一个单独的段中。 `import()` 以模块名称作为参数、返回一个 Promise 。 ```js function onClick() { @@ -475,30 +475,30 @@ function onClick() { } ``` -Good news: Failure to load a chunk can now be handled because they are `Promise` based. +好消息:因为是基于 `Promise` ,我们现在可以处理加载代码段失败的情况。 -## Dynamic expressions +## 动态表达式 -It's possible to pass a partial expression to `import()`. This is handled similar to expressions in CommonJS (webpack creates a [context](/plugins/context-replacement-plugin/) with all possible files). +传递部分表达式给 `import()` 也是有可能的。跟在 CommonJS 中处理表达式的方式相似(webpack 利用所有可能的文件创建一个 [context](/plugins/context-replacement-plugin/))。 -`import()` creates a separate chunk for each possible module. +`import()` 为每一个可能的模块创建一个单独的代码段。 ```js function route(path, query) { return import(`./routes/${path}/route`) .then(route => new route.Route(query)); } -// This creates a separate chunk for each possible route +// 为每一个可能的路由创建单独的代码段 ``` -## Mixing ES2015 with AMD and CommonJS +## 在 AMD 和 CommonJS 中混合使用 ES2015 -As for AMD and CommonJS you can freely mix all three module types (even within the same file). webpack behaves similar to babel and node-eps in this case: +在 AMD 和 CommonJS 中,你可以自由的混合使用三个模块类型(即便是在相同的文件里)。在这种情况下,webpack 面对 babel 和 node-eps 表现一致: ```javascript -// CommonJS consuming ES2015 Module +// CommonJS 中引入 ES2015 模块 var book = require('./book'); book.currentPage; @@ -507,7 +507,7 @@ book.default === 'This is a book'; ``` ```javascript -// ES2015 Module consuming CommonJS +// ES2015 模块中引入 CommonJS import fs from 'fs'; // module.exports map to default import { readFileSync } from 'fs'; // named exports are read from returned object+ @@ -515,7 +515,7 @@ typeof fs.readFileSync === 'function'; typeof readFileSync === 'function'; ``` -It is important to note that you will want to tell Babel to not parse these module symbols so webpack can use them. You can do this by setting the following in your `.babelrc` or `babel-loader` options. +有一个重要的点要注意到,你需要通知 Babel 不要解析那些模块符号,这样 webpack 才能继续工作解析下去。你可以在你的`.babelrc` 或者 `babel-loader` 文件中配置下面这些配置项: __.babelrc__ @@ -528,13 +528,13 @@ __.babelrc__ ``` -## Hints +## 提示 -No need to change something, but opportunities +不需要改变什么,但是要抓住机会。 -### Template strings +### 模版字符串 -webpack now supports template strings in expressions. This means you can start using them in webpack constructs: +webpack 现在支持在表达式中使用摸板字符串。这就意味着你可以在 webpack 构造函数中着手使用: ``` diff - require("./templates/" + name); @@ -544,7 +544,7 @@ webpack now supports template strings in expressions. This means you can start u ### Configuration Promise -webpack now supports returning a `Promise` from the configuration file. This allows async processing in your configuration file. +webpack 现在支持从配置文件中返回一个 `Promise` 。这就说明在配置文件中可以实现异步解析。 __webpack.config.js__ @@ -563,7 +563,7 @@ module.exports = function() { ### Advanced loader matching -webpack now supports more things to match on for loaders. +webpack 现在支持更多形式去匹配 loaders。 ```js module.exports = { @@ -581,29 +581,29 @@ module.exports = { ``` -### More CLI options +### 更多的 CLI 选项 -There are some new CLI options for you to use: +你可以使用更多的新 CLI 选项: -`--define process.env.NODE_ENV="production"` See [`DefinePlugin`](/plugins/define-plugin/). +`--define process.env.NODE_ENV="production"` 请参阅 [`DefinePlugin`](/plugins/define-plugin/). -`--display-depth` displays the distance to the entry point for each module. +`--display-depth` 可以获取每个模块距离入口的距离。 -`--display-used-exports` display info about which exports are used in a module. +`--display-used-exports` 可以获取一个模块所有的导出信息。 -`--display-max-modules` sets the number for modules displayed in the output (defaults to 15). +`--display-max-modules` 可以设置导出的模块数量(默认是15个)。 -`-p` also defines `process.env.NODE_ENV` to `"production"` now. +`-p` 也可以在`"production"` 环境定义 `process.env.NODE_ENV` 。 -## Loader changes +## Loader 改变 -Changes only relevant for loader authors. +改变仅仅和 loader 的作者相关。 ### Cacheable -Loaders are now cacheable by default. Loaders must opt-out if they are not cacheable. +Loaders 现在默认支持可缓存。不支持缓存的 Loaders 必须设置为false。 ``` diff // Cacheable loader @@ -622,13 +622,13 @@ Loaders are now cacheable by default. Loaders must opt-out if they are not cache ``` -### Complex options +### 复杂选项 -__webpack 1__ only supports `JSON.stringify`-able options for loaders. +__webpack 1__ 仅仅支持 loaders的 `JSON.stringify`-able 选项。 -__webpack 2__ now supports any JS object as loader options. +__webpack 2__ 现在支持任意 JS 对象作为 loader 选项。 -Before webpack [2.2.1](https://github.com/webpack/webpack/releases/tag/v2.2.1) (i.e. from 2.0.0 through 2.2.0), using complex options required using `ident` for the `options` object to allow its reference from other loaders. __This was removed in 2.2.1__ and thus current migrations do not require any use of the `ident` key. +在webpack [2.2.1](https://github.com/webpack/webpack/releases/tag/v2.2.1) 版本之前(例如从 2.0.0 到 2.2.0), 使用复杂选项的话,必须在`options` 对象中使用 `ident` 来确保其他 loaders 可以引用。 __在 2.2.1 版本中已经移除__ 并且现在的配置已经不再需要使用 `ident` 。 ```diff { From 7ab420d4cab6bb93cdc40d8db1ed1f63deb63c49 Mon Sep 17 00:00:00 2001 From: wangyage Date: Wed, 24 Jun 2020 11:09:04 +0800 Subject: [PATCH 2/8] docs(cn): translate ./src/content/migrate/3.md --- src/content/migrate/3.md | 208 +++++++++++++++++++-------------------- 1 file changed, 104 insertions(+), 104 deletions(-) diff --git a/src/content/migrate/3.md b/src/content/migrate/3.md index d88cddd02c03..3abcf526dffe 100644 --- a/src/content/migrate/3.md +++ b/src/content/migrate/3.md @@ -1,5 +1,5 @@ --- -title: To v2 or v3 from v1 +title: 从 v1 升级到 v2 或 v3 sort: 3 contributors: - sokra @@ -18,14 +18,14 @@ contributors: - byzyk --- -下面的部分描述了从 webpack 1 到 webpack 2 的主要变化。 +以下各节描述从 webpack 1 到 webpack 2 的重大变化。 -T> 注意,webpack 2 和 3 之间的变化很少,所以升级迁移起来不会太糟。如果遇到问题,详情请参阅 [the changelog](https://github.com/webpack/webpack/releases) 。 +T> 注意:webpack 从 1 到 2 的变化,比从 2 到 3 要少很多,所以版本迁移起来难度应该不大。如果你遇到了问题,请查看 [更新日志](https://github.com/webpack/webpack/releases) 以了解更多细节。 ## `resolve.root`, `resolve.fallback`, `resolve.modulesDirectories` -使用一个`resolve.modules`配置替换了下面这些配置项。更多用法请参阅 [resolving](/configuration/resolve)。 +这些选项被一个单独的选项 `resolve.modules` 取代。更多用法请查看 [resolving](/configuration/resolve) 。 ``` diff resolve: { @@ -40,19 +40,19 @@ T> 注意,webpack 2 和 3 之间的变化很少,所以升级迁移起来不 ## `resolve.extensions` -这个配置在使用时不再需要传入一个空字符串,该配置已迁移至 `resolve.enforceExtension` 。更多用法请参阅[resolving](/configuration/resolve)。 +此选项不再需要传一个空字符串。此行为被迁移到 `resolve.enforceExtension` 。更多用法请查看 [解析](/configuration/resolve) 。 ## `resolve.*` -有一些 API 发生了改变。因为不常用在这里没有详细列出。更多细节请参阅[resolving](/configuration/resolve)。 +这里更改了几个 API 。由于不常用,不在这里详细列出。更多用法请查看 [解析](/configuration/resolve) 。 ## `module.loaders` 升级为 `module.rules` -旧的 loader 配置被一个更强大的规则系统取代,该系统除了允许配置 loader 还支持其他更多配置。 -考虑到兼容性,系统仍然支持解析旧的配置项,也可以使用旧的配置 `module.loaders` 。 -新的配置命名很容易理解,这也不失为一个好的理由升级使用新的配置 `module.rules` 。 +旧的 loader 配置被更强大的 rules 系统取代,后者允许配置 loader 以及其他更多选项。 为了兼容旧版,`module.loaders` 语法仍然有效,旧的属性名依然可以被解析。 新的命名约定更易于理解,并且是升级配置使用 `module.rules` 的好理由。 + + ``` diff module: { @@ -77,7 +77,7 @@ T> 注意,webpack 2 和 3 之间的变化很少,所以升级迁移起来不 }, { test: /\.jsx$/, - loader: "babel-loader", // 在这里不要使用 'use' + loader: "babel-loader", // 在这里不要使用 "use" options: { // ... } @@ -89,9 +89,9 @@ T> 注意,webpack 2 和 3 之间的变化很少,所以升级迁移起来不 ## 链式 loaders -和 webpack 1 一样,loaders 支持将执行结果从一个 loader 传递给 下一个 loader 的串行链式调用。 -使用[rule.use](/configuration/module/#ruleuse) 配置项, `use` 支持配置 loaders 数组。 -在 webpack 1 中,多个 loaders 的串联都是用 `!` 。只有在`module.loaders` 中才支持这种写法。 +就像在 webpack 1 中,loader 可以链式调用,上一个 loader 的输出被作为输入传给下一个 loader。 使用 [rule.use](/configuration/module/#ruleuse) 配置选项,`use` 可以设置为一个 loader 数组。 在 webpack 1 中,loader 通常被用 `!` 连写。这一写法在 webpack 2 中只在使用旧的选项 `module.loaders` 时才有效。 + + ``` diff module: { @@ -111,7 +111,7 @@ T> 注意,webpack 2 和 3 之间的变化很少,所以升级迁移起来不 ## 已移除 `-loader` 模块名称自动扩展 -在引用 loaders 时,不能再使用 `-loader` 自动扩展: +在引用 loader 时,不能再省略 `-loader` 后缀了: ``` diff module: { @@ -130,7 +130,7 @@ T> 注意,webpack 2 和 3 之间的变化很少,所以升级迁移起来不 } ``` -你可以通过 `resolveLoader.moduleExtensions` 继续使用这种低版本的配置形式,但是官方不推荐。 +你仍然可以通过配置 `resolveLoader.moduleExtensions` 配置选项,启用这一旧有行为,但是我们不推荐这么做。 ``` diff + resolveLoader: { @@ -138,13 +138,13 @@ T> 注意,webpack 2 和 3 之间的变化很少,所以升级迁移起来不 + } ``` -具体原因请参阅 [#2986](https://github.com/webpack/webpack/issues/2986) 。 +了解这一改变背后的原因,请查看 [#2986](https://github.com/webpack/webpack/issues/2986) 。 + +## `json-loader` 不再需要手动添加 -## 不再需要强制引入 `json-loader` +如果没有为 JSON 文件配置 loader,webpack 将自动尝试通过 [`json-loader`](https://github.com/webpack-contrib/json-loader) 加载 JSON 文件。 -当用户没有配置解析 JSON 文件的配置项时,webpack 会自动使用[`json-loader`](https://github.com/webpack-contrib/json-loader) -解析 JSON 文件。 ``` diff module: { @@ -158,16 +158,16 @@ T> 注意,webpack 2 和 3 之间的变化很少,所以升级迁移起来不 ``` [我们决定这样做](https://github.com/webpack/webpack/issues/3363) -是为了消除 webpack、nodejs、browserify 之间的环境差异。 +是为了消除 webpack、 node.js 和 browserify 之间的环境差异。 -## Loaders in configuration resolve relative to context +## 配置中的 loader 默认相对于 context 进行解析 -In __webpack 1__, configured loaders resolve relative to the matched file. However, in __webpack 2__, configured loaders resolve relative to the `context` option. +在 __webpack 1__ 中,默认配置下 loader 解析相对于被匹配的文件。然而,在 __webpack 2__ 中,默认配置下 loader 解析相对于 `context` 选项。 -This solves some problems with duplicate modules caused by loaders when using `npm link` or referencing modules outside of the `context`. +这解决了「在使用 `npm link` 或引用 `context` 上下文目录之外的模块时,loader 所导致的模块重复载入」的问题。 -You may remove some hacks to work around this: +你可以移除掉那些为解决此问题的 hack 方案了: ``` diff module: { @@ -203,7 +203,7 @@ You may remove some hacks to work around this: ## `UglifyJsPlugin` sourceMap - `UglifyJsPlugin` 配置中的 `sourceMap` 选项默认设置为 false 替代之前的默认值 `true` 。这就意味着如果你想要在压缩过的代码中使用 source maps 或者 想要看到正确的行号,你需要在 `UglifyJsPlugin` 配置中设置 `sourceMap: true` 。 + `UglifyJsPlugin` 的 `sourceMap` 选项现在默认为 `false` 而不是 `true`。这意味着如果你在压缩代码时启用了 `source map`,或者想要让 `uglifyjs` 的警告能够对应到正确的代码行,你需要将 `UglifyJsPlugin` 的 `sourceMap` 设为 `true` 。 ``` diff devtool: "source-map", @@ -215,10 +215,10 @@ You may remove some hacks to work around this: ``` -## `UglifyJsPlugin` 警告提示 +## `UglifyJsPlugin` warnings + + `UglifyJsPlugin` 的 `compress.warnings` 选项现在默认为 `false` 而不是 `true` 。 这意味着如果你想要看到 `uglifyjs` 的警告信息,你需要将 `compress.warnings` 设为 `true。` - `UglifyJsPlugin` 配置中 `compress.warnings` 选项默认设置为 `false` 替代之前的默认值 `true` 。 - 这就意味着如果你想看到 uglifyjs 静态提示,你需要设置 `compress.warnings` 为 `true` 。 ``` diff devtool: "source-map", @@ -234,11 +234,11 @@ You may remove some hacks to work around this: ## `UglifyJsPlugin` 压缩优化 loaders -`UglifyJsPlugin` 不再压缩优化代码。长期而言需要设置 loader 的配置项 `minimize: true` 。其他相关配置项请参阅 loader 配置文档。 +`UglifyJsPlugin` 不再压缩 loaders。在未来很长一段时间里,需要通过设置 `minimize:true` 来压缩 loaders。参考 loader 文档里的相关选项。 -在 webpack 3 或者之后的版本中,将会移除 loader 压缩优化的代码。 +loaders 的压缩模式将在 webpack 3 或后续版本中取消。 -为了兼容低版本的 loaders,可以使用插件将 loaders 转换为最小化模式。 +为了兼容旧的 loaders,loaders 可以通过插件来切换到压缩模式: ``` diff plugins: [ @@ -249,14 +249,14 @@ You may remove some hacks to work around this: ``` -## 已经移除 `DedupePlugin` +## 移除 `DedupePlugin` -已经不再需要 `webpack.optimize.DedupePlugin` 。请在你的配置中移除这个配置项。 +不再需要 `webpack.optimize.DedupePlugin`。请从配置中移除。 -## `BannerPlugin` - 突破性改变 +## `BannerPlugin` - 破坏性改动 -`BannerPlugin` 不再需要配置两个参数,直接使用一个配置项对象。 +`BannerPlugin` 不再接受两个参数,而是只接受单独的 options 对象。 ``` diff plugins: [ @@ -266,10 +266,10 @@ You may remove some hacks to work around this: ``` -## `OccurrenceOrderPlugin` 默认生效 +## 默认加载 `OccurrenceOrderPlugin` - `OccurrenceOrderPlugin` 配置现在默认生效并且已经重新更正过配置名(在webpack 1 中是 `OccurenceOrderPlugin`)。 -因此请确保在你的配置项中移除这个插件的调用: + `OccurrenceOrderPlugin` 现在默认启用,并已重命名(在webpack 1 中为 `OccurenceOrderPlugin`) 。 + 因此,请确保从你的配置中删除该插件: ``` diff plugins: [ @@ -281,13 +281,13 @@ You may remove some hacks to work around this: ``` -## `ExtractTextWebpackPlugin` - 突破性改变 +## `ExtractTextWebpackPlugin` - 破坏性改动 -在 webpack 2 中需要引入 [ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) 的版本 2 。 +[ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) 需要使用版本 2,才能在 webpack 2 下正常运行 。 `npm install --save-dev extract-text-webpack-plugin` -这个插件配置的改变主要是语法方面。 +这一插件的配置变化主要体现在语法上。 ### `ExtractTextPlugin.extract` @@ -322,17 +322,17 @@ plugins: [ ``` -## 全量动态的 requires 引入默认失败 +## 全动态 require 现在默认会失败 -现在只有一个表达式的依赖(例如: `require(expr)`) 将会创建一个空的上下文,代替一个完全目录的上下文。 +只有一个表达式的依赖(例如 `require(expr)`)将创建一个空的 context 而不是一个完整目录的 context。 -像这样的代码在 es2015 语法的模块里无法解析执行,所以需要重构。如果还是不行,你可以使用 `ContextReplacementPlugin` 提示编译器以正确的方式解析。 +这样的代码应该进行重构,因为它不能与 ES2015 模块一起使用。如果你确定不会有 ES2015 模块,你可以使用 `ContextReplacementPlugin` 来指示 compiler 进行正确的解析。 -?> 动态依赖文章的链接占位 +?> Link to an article about dynamic dependencies. -### 在脚手架和配置中使用自定义参数 +### 在 CLI 和配置中使用自定义参数 -如果你不再像下面这样在 CLI 中传递自定义参数: +如果你之前滥用 CLI 来传自定义参数到配置中,比如: `webpack --custom-stuff` @@ -343,9 +343,9 @@ var customStuff = process.argv.indexOf('--custom-stuff') >= 0; module.exports = config; ``` -你可能注意到已经不允许自定义传递参数了。CLI 现在更加严格了。 +你将会发现新版中不再允许这么做。CLI 现在更加严格了。 -相反会有接口支持传递参数到配置中。应该使用这种接口。未来的工具可能就依赖这个接口传参。 +替代地,现在提供了一个接口来传递参数给配置。我们应该采用这种新方式,在未来许多工具将可能依赖于此。 `webpack --env.customStuff` @@ -357,19 +357,19 @@ module.exports = function(env) { }; ``` -请参阅 [CLI](/api/cli)。 +详见 [CLI](/api/cli) 。 -## `require.ensure` 和 AMD `require` 都是异步的 +## `require.ensure` 以及 AMD `require` 将采用异步式调用 -这些方法现在都已经是异步请求了,代替了chunk下载完成之后同步调用回调的方式。 +现在这些函数总是异步的,而不是当 chunk 已经加载完成的时候同步调用它们的回调函数 (callback) 。 -__`require.ensure` 现在依赖原生的 `Promise`s 。如果在一个不支持的环境中使用 `require.ensure` ,需要 polyfill.__ 支持。 +__`require.ensure` 现在依赖原生的 `Promise`s 。如果不支持 Promise 的环境中使用 `require.ensure` ,你需要添加 polyfill.__ 。 -## 在 `options` 中配置 Loader +## 通过 `options` 中配置 loader -在 `webpack.config.js` 中,你不再需要通过自定义属性配置 loader 。必须在 `options` 中配置 loader 。下面 `ts` 相关的配置已经在 webpack 2 中不再起作用。 +你_不能再_通过 `webpack.config.js` 的自定义属性来配置 loader 。只能通过 `options` 来配置。下面配置的 `ts` 属性在 webpack 2 下不再有效: ```js module.exports = { @@ -380,7 +380,7 @@ module.exports = { loader: 'ts-loader' }] }, - // 在 webpack 2 中不起作用 + // 在 webpack 2 中无效 ts: { transpileOnly: false } }; ``` @@ -388,7 +388,7 @@ module.exports = { ### 什么是 `options` ? -好问题。严格的来说这是两种可能性。都是配置 webpack loader 的方式。一般来说, `options` 被称为 `query` ,是紧跟在 loader 后面的字符串。像一个查询字符串但其实有 [更强大的作用](https://github.com/webpack/loader-utils#parsequery): +好问题。严格来说,有两种办法,都可以用来配置 webpack 的 loader 。典型的 `options` 被称为 `query`,是一个可以被添加到 loader 名之后的字符串。它比较像一个 query string,但是实际上有[更强大的能力](https://github.com/webpack/loader-utils#parsequery): ```js module.exports = { @@ -402,7 +402,7 @@ module.exports = { }; ``` -但是它也可以是一个在 loader 之外单独指定的对象: +不过它也可以分开来,写成一个单独的对象,紧跟在 loader 属性后面: ```js module.exports = { @@ -418,11 +418,11 @@ module.exports = { ``` -## `LoaderOptionsPlugin` 上下文 +## `LoaderOptionsPlugin` context -有一些 loaders 需要从配置中获取上下文信息。长期来看,这些信息需要通过 loader 配置项传入。更多相关配置项请参阅 loader 文档。 +有的 loader 需要从配置中读取一些 context 信息。在未来很长一段时间里,这将需要通过 loader options 传入。详见 loader 文档的相关选项。 -为了兼容低版本 loaders ,这些信息也可以通过插件传入: +为了保持对旧 loaders 的兼容,这些信息可以通过插件传进来: ``` diff plugins: [ @@ -437,11 +437,11 @@ module.exports = { ## `debug` -在 webpack 1 中 `debug` 选项可以设置 loaders 为 debug 模式。长期来看,这些信息需要通过 loader 配置项传入。更多相关配置项请参阅 loader 文档。 +在 webpack 1 中 `debug` 选项可以将 loader 切换到调试模式 (debug mode) 。在未来很长一段时间里,这将需要通过 loader 选项传递。详见 loader 文档的相关选项。 -在 webpack 3 或者 之后的版本中,loaders 的 debug 模式将会被移除。 +loaders 的调试模式将在 webpack 3 或后续版本中取消。 -为了兼容低版本 loaders ,可以通过插件将 loaders 切换到 debug 模式: +为了保持对旧 loaders 的兼容,loader 可以通过插件来切换到调试模式: ``` diff - debug: true, @@ -453,9 +453,9 @@ module.exports = { ``` -## Code Splitting with ES2015 +## ES2015 的代码分割 -在 webpack 1 中,你可以在应用中使用 [`require.ensure()`](/api/module-methods/#requireensure) 来懒加载代码段。 +在 webpack 1 中,可以使用 [`require.ensure()`](/api/module-methods/#requireensure) 作为实现应用程序的懒加载 chunks 的一种方法: ```javascript require.ensure([], function(require) { @@ -463,7 +463,7 @@ require.ensure([], function(require) { }); ``` -es2015 loader 特别定义了 [`import()`](/api/module-methods/#import-1) 作为运行时动态加载 es2015 模块的方法。 webpack 将 `import()` 作为一个代码拆分的点,并且将这些必需的模块放在一个单独的段中。 `import()` 以模块名称作为参数、返回一个 Promise 。 +ES2015 模块加载规范定义了 [`import()`](/api/module-methods/#import-1) 方法,可以在运行时 (runtime) 动态地加载 ES2015 模块。webpack 将 `import()` 作为分割点 (split-point) 并将所要请求的模块 (requested module) 放置到一个单独的 chunk 中。`import()` 接收模块名作为参数,并返回一个 Promise 。 ```js function onClick() { @@ -475,30 +475,30 @@ function onClick() { } ``` -好消息:因为是基于 `Promise` ,我们现在可以处理加载代码段失败的情况。 +好消息是:如果加载 chunk 失败,我们现在可以进行处理,因为现在它基于 `Promise`。 ## 动态表达式 -传递部分表达式给 `import()` 也是有可能的。跟在 CommonJS 中处理表达式的方式相似(webpack 利用所有可能的文件创建一个 [context](/plugins/context-replacement-plugin/))。 +可以传递部分表达式给 `import()` 。这与 CommonJS 对表达式的处理方式一致(webpack 为所有可能匹配的文件创建 context](/plugins/context-replacement-plugin/)) )。 -`import()` 为每一个可能的模块创建一个单独的代码段。 +`import()` 为每一个可能的模块创建独立的 chunk。 ```js function route(path, query) { return import(`./routes/${path}/route`) .then(route => new route.Route(query)); } -// 为每一个可能的路由创建单独的代码段 +// 上面代码为每个可能的路由创建独立的 chunk ``` -## 在 AMD 和 CommonJS 中混合使用 ES2015 +## 混合使用 ES2015、AMD 和 CommonJS -在 AMD 和 CommonJS 中,你可以自由的混合使用三个模块类型(即便是在相同的文件里)。在这种情况下,webpack 面对 babel 和 node-eps 表现一致: +你可以自由混合使用三种模块类型(甚至在同一个文件中)。在这个情况中 webpack 的行为和 babel 以及 node-eps 一致: ```javascript -// CommonJS 中引入 ES2015 模块 +// CommonJS 调用 ES2015 模块 var book = require('./book'); book.currentPage; @@ -507,15 +507,15 @@ book.default === 'This is a book'; ``` ```javascript -// ES2015 模块中引入 CommonJS -import fs from 'fs'; // module.exports map to default -import { readFileSync } from 'fs'; // named exports are read from returned object+ +// ES2015 模块调用 CommonJS +import fs from 'fs'; // module.exports 映射到 default +import { readFileSync } from 'fs'; // 从返回对象(returned object+)中读取命名的导出方法(named exports) typeof fs.readFileSync === 'function'; typeof readFileSync === 'function'; ``` -有一个重要的点要注意到,你需要通知 Babel 不要解析那些模块符号,这样 webpack 才能继续工作解析下去。你可以在你的`.babelrc` 或者 `babel-loader` 文件中配置下面这些配置项: +值得注意的是,你需要让 Babel 不解析这些模块符号,从而让 webpack 可以使用它们。你可以通过设置如下配置到 .babelrc 或 babel-loader 来实现这一点。 __.babelrc__ @@ -528,13 +528,13 @@ __.babelrc__ ``` -## 提示 +## Hints -不需要改变什么,但是要抓住机会。 +不需要改变什么,但有机会改变。 ### 模版字符串 -webpack 现在支持在表达式中使用摸板字符串。这就意味着你可以在 webpack 构造函数中着手使用: +webpack 现在支持表达式中的模板字符串了。这意味着你可以在 webpack 构建中使用它们: ``` diff - require("./templates/" + name); @@ -542,9 +542,9 @@ __.babelrc__ ``` -### Configuration Promise +### 配置中使用 Promise -webpack 现在支持从配置文件中返回一个 `Promise` 。这就说明在配置文件中可以实现异步解析。 +webpack 现在支持在配置文件中返回 `Promise` 了。这让你能在配置文件中做异步处理。 __webpack.config.js__ @@ -561,9 +561,9 @@ module.exports = function() { ``` -### Advanced loader matching +### 高级 loader 匹配 -webpack 现在支持更多形式去匹配 loaders。 +webpack 现在支持对 loader 进行更多方式的匹配。 ```js module.exports = { @@ -571,9 +571,9 @@ module.exports = { module: { rules: [ { - resource: /filename/, // matches "/path/filename.js" - resourceQuery: /^\?querystring$/, // matches "?querystring" - issuer: /filename/, // matches "/path/something.js" if requested from "/path/filename.js" + resource: /filename/, // 匹配 "/path/filename.js" + resourceQuery: /^\?querystring$/, // 匹配 "?querystring" + issuer: /filename/, // 果请求 "/path/filename.js" 则匹配 "/path/something.js" } ] } @@ -581,32 +581,32 @@ module.exports = { ``` -### 更多的 CLI 选项 +### 更多的 CLI 参数项 -你可以使用更多的新 CLI 选项: +你可以使用一些新的 CLI 参数项: -`--define process.env.NODE_ENV="production"` 请参阅 [`DefinePlugin`](/plugins/define-plugin/). +`--define process.env.NODE_ENV="production"` 见 [`DefinePlugin`](/plugins/define-plugin/) 。 -`--display-depth` 可以获取每个模块距离入口的距离。 +`--display-depth` 显示每个模块到入口的距离。 -`--display-used-exports` 可以获取一个模块所有的导出信息。 +`--display-used-exports` 显示一个模块中被使用的 exports 信息。 -`--display-max-modules` 可以设置导出的模块数量(默认是15个)。 +`--display-max-modules` 设置输出时显示的模块数量(默认是 15)。 -`-p` 也可以在`"production"` 环境定义 `process.env.NODE_ENV` 。 +`-p` 能够定义`process.env.NODE_ENV` 为 `"production"` 。 -## Loader 改变 +## Loader 变更 -改变仅仅和 loader 的作者相关。 +以下变更仅影响 loader 的开发者。 ### Cacheable -Loaders 现在默认支持可缓存。不支持缓存的 Loaders 必须设置为false。 +Loaders 现在默认可被缓存。Loaders 如果不想被缓存,需要选择不被缓存。 ``` diff - // Cacheable loader + // 缓存 loader module.exports = function(source) { - this.cacheable(); return source; @@ -614,7 +614,7 @@ Loaders 现在默认支持可缓存。不支持缓存的 Loaders 必须设置为 ``` ``` diff - // Not cacheable loader + // 不缓存 loader module.exports = function(source) { + this.cacheable(false); return source; @@ -622,13 +622,13 @@ Loaders 现在默认支持可缓存。不支持缓存的 Loaders 必须设置为 ``` -### 复杂选项 +### 复杂 options -__webpack 1__ 仅仅支持 loaders的 `JSON.stringify`-able 选项。 +__webpack 1__ 只支持能够「可 `JSON.stringify` 的对象」作为 loader 的 options。 -__webpack 2__ 现在支持任意 JS 对象作为 loader 选项。 +__webpack 2__ 现在支持任意 JS 对象作为 loader 的 options。 -在webpack [2.2.1](https://github.com/webpack/webpack/releases/tag/v2.2.1) 版本之前(例如从 2.0.0 到 2.2.0), 使用复杂选项的话,必须在`options` 对象中使用 `ident` 来确保其他 loaders 可以引用。 __在 2.2.1 版本中已经移除__ 并且现在的配置已经不再需要使用 `ident` 。 +webpack [2.2.1](https://github.com/webpack/webpack/releases/tag/v2.2.1) 之前(即从 2.0.0 到 2.2.0),使用复合 `options` ,需要在 `options` 对象上添加 `ident`,允许它能够被其他 loader 引用。这 __在 2.2.1 中被删除__ ,因此目前的迁移不再需要使用 `ident` 键。 ```diff { From fbba5eb6edba47f94b07b0216f76f0600eea84f9 Mon Sep 17 00:00:00 2001 From: wangyage Date: Tue, 30 Jun 2020 13:36:39 +0800 Subject: [PATCH 3/8] =?UTF-8?q?fix=EF=BC=9A=E6=A0=BC=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/migrate/3.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/content/migrate/3.md b/src/content/migrate/3.md index 3abcf526dffe..c29d244a8e6d 100644 --- a/src/content/migrate/3.md +++ b/src/content/migrate/3.md @@ -20,7 +20,9 @@ contributors: 以下各节描述从 webpack 1 到 webpack 2 的重大变化。 -T> 注意:webpack 从 1 到 2 的变化,比从 2 到 3 要少很多,所以版本迁移起来难度应该不大。如果你遇到了问题,请查看 [更新日志](https://github.com/webpack/webpack/releases) 以了解更多细节。 +T> 注意:webpack 从 1 到 2 的变化,比从 2 到 3 要少很多,所以版本迁移起来难度应该不大。 +如果你遇到了问题,请查看 +[更新日志](https://github.com/webpack/webpack/releases) 以了解更多细节。 ## `resolve.root`, `resolve.fallback`, `resolve.modulesDirectories` @@ -388,7 +390,7 @@ module.exports = { ### 什么是 `options` ? -好问题。严格来说,有两种办法,都可以用来配置 webpack 的 loader 。典型的 `options` 被称为 `query`,是一个可以被添加到 loader 名之后的字符串。它比较像一个 query string,但是实际上有[更强大的能力](https://github.com/webpack/loader-utils#parsequery): +好问题。严格来说,有两种办法,都可以用来配置 webpack 的 loader 。典型的 `options` 被称为 `query`,是一个可以被添加到 loader 名之后的字符串。它比较像一个查询字符串(query string),但是实际上有[更强大的能力](https://github.com/webpack/loader-utils#parsequery): ```js module.exports = { @@ -573,7 +575,7 @@ module.exports = { { resource: /filename/, // 匹配 "/path/filename.js" resourceQuery: /^\?querystring$/, // 匹配 "?querystring" - issuer: /filename/, // 果请求 "/path/filename.js" 则匹配 "/path/something.js" + issuer: /filename/, // 如果请求 "/path/filename.js" 则匹配 "/path/something.js" } ] } From 5bbe21a497ac98e5209ac5a9c5a6d97f7e97155a Mon Sep 17 00:00:00 2001 From: wangyage Date: Tue, 30 Jun 2020 13:55:52 +0800 Subject: [PATCH 4/8] =?UTF-8?q?fix:=E6=A0=BC=E5=BC=8F=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/migrate/3.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/content/migrate/3.md b/src/content/migrate/3.md index c29d244a8e6d..9d0de999f50c 100644 --- a/src/content/migrate/3.md +++ b/src/content/migrate/3.md @@ -20,9 +20,7 @@ contributors: 以下各节描述从 webpack 1 到 webpack 2 的重大变化。 -T> 注意:webpack 从 1 到 2 的变化,比从 2 到 3 要少很多,所以版本迁移起来难度应该不大。 -如果你遇到了问题,请查看 -[更新日志](https://github.com/webpack/webpack/releases) 以了解更多细节。 +T> 注意:webpack 从 1 到 2 的变化,比从 2 到 3 要少很多,所以版本迁移起来难度应该不大。如果你遇到了问题,请查看[更新日志](https://github.com/webpack/webpack/releases) 以了解更多细节。 ## `resolve.root`, `resolve.fallback`, `resolve.modulesDirectories` @@ -52,9 +50,9 @@ T> 注意:webpack 从 1 到 2 的变化,比从 2 到 3 要少很多,所以 ## `module.loaders` 升级为 `module.rules` -旧的 loader 配置被更强大的 rules 系统取代,后者允许配置 loader 以及其他更多选项。 为了兼容旧版,`module.loaders` 语法仍然有效,旧的属性名依然可以被解析。 新的命名约定更易于理解,并且是升级配置使用 `module.rules` 的好理由。 - - +旧的 loader 配置被更强大的 rules 系统取代,后者允许配置 loader 以及其他更多选项。 +为了兼容旧版,`module.loaders` 语法仍然有效,旧的属性名依然可以被解析。 +新的命名约定更易于理解,并且是升级配置使用 `module.rules` 的好理由。 ``` diff module: { From 299867a448eff5f771520feb18ce49b7a661b9fb Mon Sep 17 00:00:00 2001 From: wangyage Date: Tue, 30 Jun 2020 14:03:54 +0800 Subject: [PATCH 5/8] =?UTF-8?q?fix=EF=BC=9A=E6=A0=BC=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/migrate/3.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/migrate/3.md b/src/content/migrate/3.md index 9d0de999f50c..05fc058e1667 100644 --- a/src/content/migrate/3.md +++ b/src/content/migrate/3.md @@ -143,8 +143,8 @@ T> 注意:webpack 从 1 到 2 的变化,比从 2 到 3 要少很多,所以 ## `json-loader` 不再需要手动添加 -如果没有为 JSON 文件配置 loader,webpack 将自动尝试通过 [`json-loader`](https://github.com/webpack-contrib/json-loader) 加载 JSON 文件。 - +如果没有为 JSON 文件配置 loader,webpack 将自动尝试通过 [`json-loader`] +(https://github.com/webpack-contrib/json-loader) 加载 JSON 文件。 ``` diff module: { From 354e090282ad414997d7cd7d542d71611b243e12 Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Tue, 30 Jun 2020 14:53:25 +0800 Subject: [PATCH 6/8] Update 3.md --- src/content/migrate/3.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/migrate/3.md b/src/content/migrate/3.md index 05fc058e1667..9dc9678d7105 100644 --- a/src/content/migrate/3.md +++ b/src/content/migrate/3.md @@ -92,7 +92,6 @@ T> 注意:webpack 从 1 到 2 的变化,比从 2 到 3 要少很多,所以 就像在 webpack 1 中,loader 可以链式调用,上一个 loader 的输出被作为输入传给下一个 loader。 使用 [rule.use](/configuration/module/#ruleuse) 配置选项,`use` 可以设置为一个 loader 数组。 在 webpack 1 中,loader 通常被用 `!` 连写。这一写法在 webpack 2 中只在使用旧的选项 `module.loaders` 时才有效。 - ``` diff module: { - loaders: [{ From 7d93c6b9ef54de299a2392b9d321cc4669d3dcbd Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Tue, 30 Jun 2020 14:54:03 +0800 Subject: [PATCH 7/8] Update src/content/migrate/3.md --- src/content/migrate/3.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/migrate/3.md b/src/content/migrate/3.md index 9dc9678d7105..573448ccda66 100644 --- a/src/content/migrate/3.md +++ b/src/content/migrate/3.md @@ -91,7 +91,6 @@ T> 注意:webpack 从 1 到 2 的变化,比从 2 到 3 要少很多,所以 就像在 webpack 1 中,loader 可以链式调用,上一个 loader 的输出被作为输入传给下一个 loader。 使用 [rule.use](/configuration/module/#ruleuse) 配置选项,`use` 可以设置为一个 loader 数组。 在 webpack 1 中,loader 通常被用 `!` 连写。这一写法在 webpack 2 中只在使用旧的选项 `module.loaders` 时才有效。 - ``` diff module: { - loaders: [{ From f0ad55982b6d9723d3f357215f41b5d7c43ab041 Mon Sep 17 00:00:00 2001 From: QiChang Li Date: Tue, 30 Jun 2020 14:54:45 +0800 Subject: [PATCH 8/8] Update src/content/migrate/3.md --- src/content/migrate/3.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/content/migrate/3.md b/src/content/migrate/3.md index 573448ccda66..29eedf589abd 100644 --- a/src/content/migrate/3.md +++ b/src/content/migrate/3.md @@ -89,7 +89,9 @@ T> 注意:webpack 从 1 到 2 的变化,比从 2 到 3 要少很多,所以 ## 链式 loaders -就像在 webpack 1 中,loader 可以链式调用,上一个 loader 的输出被作为输入传给下一个 loader。 使用 [rule.use](/configuration/module/#ruleuse) 配置选项,`use` 可以设置为一个 loader 数组。 在 webpack 1 中,loader 通常被用 `!` 连写。这一写法在 webpack 2 中只在使用旧的选项 `module.loaders` 时才有效。 +就像在 webpack 1 中,loader 可以链式调用,上一个 loader 的输出被作为输入传给下一个 loader。 +使用 [rule.use](/configuration/module/#ruleuse) 配置选项,`use` 可以设置为一个 loader 数组。 +在 webpack 1 中,loader 通常被用 `!` 连写。这一写法在 webpack 2 中只在使用旧的选项 `module.loaders` 时才有效。 ``` diff module: {