From b2174fa0e69569f1097485cbe833454f4dc7b7f3 Mon Sep 17 00:00:00 2001 From: lizhihua <275091674@qq.com> Date: Sat, 13 Jan 2018 20:53:43 +0800 Subject: [PATCH] =?UTF-8?q?=E6=82=A8=20->=20=E4=BD=A0=20&=20=E7=BB=9F?= =?UTF-8?q?=E4=B8=80=E4=B8=BA=EF=BC=9A=E6=9C=AC=E6=8C=87=E5=8D=97=E7=BB=A7?= =?UTF-8?q?=E7=BB=AD=E6=B2=BF=E7=94=A8[xxx](/guides/xxx)=E4=B8=AD=E7=9A=84?= =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=A4=BA=E4=BE=8B=20(#440)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * update /content/loaders & /content/plugins * update /content/loaders & /content/plugins * update /content/loaders & /content/plugins * update contributors * update /content/loaders & /content/plugins * fix LinkDropdown * 修复 npm 命令错误导致编译不成功的问题 * update /content/loaders & /content/plugins * update /content/loaders & /content/plugins * update /content/loaders & /content/plugins * docs(plugins): fix typo in module-concatenation-plugin.md (#1683) * docs(concepts): simplify the introduction (#1673) Make the `index` page more beginner friendly with less technical lingo and complex details. Resolves #1416 * docs(plugins): add “scope hoisting” intro in module-concatenation-plugin (#1684) This adds a link between “concatenation behavior” and “scope hoisting”. Without this, a new person might be confused what exactly “scope hoisting” is (because it appears without any visible connection to the previous content). * docs(api): fix some method signatures in loaders.md (#1685) In actual fact the parameters passed to `emitWarning` / `emitError` must be an instance of Error. * update /content/loaders & /content/plugins * docs(guides): consistent quoute use in typescript.md (#1687) * docs(api/guides): document new --concatenate-modules flag (#1686) Document the new `--concatenate-modules` flag in both the CLI documentation and production guide. Add section on the `ModuleConcatenationPlugin` in the production guide (as we include this plugin under `-p`, it also makes sense to mention it in this guide. * docs(guides): fix issues with examples in shimming.md (#1680) Rename plugin identifier and require webpack when it is used in the configuration examples. * docs(guides): add middleware tip to the hmr guide Resolves #1682 * Revert "A new --concatenate-modules flag" (#1692) * update master * update /content/loaders & /content/plugins * docs(concepts): fix grammar in output.md (#1694) * docs(contribute): update writing-a-loader (#1691) Use normal function instead of arrow function to fix scope in loader example. * docs(plugins): add external example in SourceMapDevToolPlugin (#1676) Demonstrate how one might use the plugin to host source maps externally. * docs(config): update dev-server open option (#1693) State the ability to open in specific browser. * fix bugs * update /content/loaders & /content/plugins * docs(api): improve formatting and grammar in loaders.md * docs(api): clarify fourth parameter of `this.callback` in loaders.md Add some lead in descriptions to the `Examples` section and clarify that meta data can be passed along via the fourth parameter to `this.callback` and accepted as the third parameter to a loader function. Resolves #1607 * docs(api): populate missing link in loaders.md * docs(plugins): correct example in html-webpack-plugin (#1698) * docs(guides): update an example in production.md (#1696) Switch to shortened form when using the `DefinePlugin` to define the `process.env.NODE_ENV` value. This avoids a bug which is mentioned in the plugin's documentation: https://webpack.js.org/plugins/define-plugin/#feature-flags * fix(markdown): fix overflowing inline code (#1701) Change the css to fix the text inside code tag which was overflowing the parent div. * docs(concepts): update concepts wording (#1702) Add "static" to "module bundler". Some feedback here was given to me on twitter to make sure we are clear with what these terms mean. * update /content/loaders & /content/plugins * docs(config): fix dead link to webpack-dev-server example (#1704) * docs(concepts): use fragment links in usage instructions (#1705) This is just a quality of life adjustment that updates the list of ways to use loaders with fragment links to the relevant section in the docs. In their current state, the section feels like a dead end, abruptly cutting off with three bullet points and no examples. While one can read on and figure it out, there is a break in focus that is quite distracting. * docs(guides): add windows usage tip in getting-started (#1671) * doc(guides): fix grammatical error in build-performance (#1709) Change "less" to "fewer". * docs(guides): correct two small typos * docs(api): remove inadvertent double verb (#1714) * docs(contribute): fix grammar in writing-a-plugin (#1715) * docs(config): add semicolon for consistency (#1716) The final code block was missing a semicolon from the end of the first line; added it in to match the other require statements. * docs(contributing): add note about debian OS (#1721) Related issue: #1718 * docs(guides): add output example to shimming doc (#1720) * docs(plugins): use `.includes` over `.indexOf` (#1719) Really minor but I think `.includes` is more readable to the unfamiliar with javascript. * docs(guides): use `npx` in getting-started (#1708) Keep the mention the webpack binary's path but use the `npx` utility now that it ships with Node. Fix some punctuation and grammar. Clarify why npm scripts are still useful even over `npx`. * update /src/content/loaders & /src/content/plugins * docs(contribute): link compiler docs in writing-a-plugin (#1700) While authoring plugins the list of hooks is essential knowledge, so a link to hooks documentation page should be accessible in the top of writing a plugin guide. * docs(guides): fix `source-map` discrepancy in production.md (#1711) The `webpack.prod.js` code example in the "Specify the Evironment" section shows `cheap-module-source-map` for the `devtool` field which is not recommended for production. This section should show `source-map` to be consistent with the webpack.prod.js in the previous "Source Mapping" section. * docs(guides): rename 'runtime' to 'manifest' in caching.md (#1713) Preserve CommonsChunkPlugin boilerplate naming consistency as referenced in the CommonsChunkPlugin documentation (see below) when extracting webpack runtime and manifest boilerplate. https://webpack.js.org/plugins/commons-chunk-plugin#manifest-file * docs(guides): update output to webpack 3.9.1 (#1724) * docs(plugins): update the source-map-devtool-plugin (#1707) Clean up formatting a bit and add undocumented options from webpack/webpack#5986. Update the external source maps example to demonstrate path stripping. * docs(contribute): correct an example in the writers-guide (#1727) In a section which states the properties must be sorted alphabetically, sort the examples alphabetically. * docs(config): improve formatting and add note about library entry points in output.md * docs(guides): mention complex entry point configuration in author-libraries Note that `entry` arrays are not recommended, provide a way to properly expose stylesheets, and add a link to an `entry` object example. * docs(config): improve formatting and clarify the string usage in externals Resolves #1726 * docs(config): fix minor proselint error in externals * docs(api): clarify the `pitch` method and how it can be used in loaders.md Resolves #449 Resolves #116 Refactored and enhanced the existing section using much of @sokra's explanation from: https://github.com/webpack/webpack/issues/360 * docs(contribute): fix `import` statement in writing-a-loader.md (#1732) `validateOptions` is exported as a default module. * docs(config): update devtool production recommendations * docs(api): remove obsolete cli flag (#1733) The `--save` option has been removed from webpack's CLI. See the following pull request for reference: https://github.com/webpack/webpack/pull/3896 * docs(concepts): add warning about incompatible `import` statements Resolves #1736 * docs(config): fix typescript setup in configuration-languages (#1734) Resolves #1735 * docs: use full `npm install` over `npm i` (#1740) Most of the guides use the full command, so it's best to stay consistent. * docs(guides): fix diff display for webpack.config.js entry object Resolves #1743 * docs: fix typos * docs: add tbroadley to contributor lists * docs(contribute): correct schema example in `writing-a-loader.md` (#1753) * docs(guides): add pwa guide (#1737) Add `progressive-web-application.md` guide which documents how to use the `workbox-webpack-plugin` to build an offline app. More on PWAs in webpack can be added here by future contributors. Resolves #1145 * docs(guides): highlight css splitting in production Resolves #1741 * docs(plugins): use `.includes` over `.indexOf` Consistent usage of `.includes` * docs(config): omit invalid `detailed` option in stats.md (#1757) * fix(mobile): correctly sort pages in mobile sidebar (#1759) * chore(vote): port voting app, update deps, and simplify config (#1717) Port the voting app to a it's own repository and expose that section of the site more prominently (in the header). This commit also... - Simplifies the webpack config slightly and allows external styles. - Updates issue template to highlight content from other repositories. - Updates some outdated dependencies. * docs(readme): reformat at 80 characters and include browserstack link By including this, _BrowserStack_ will allow us to do free testing of the site on their platform. * refactor(notification): simplify notification message and bump the version * fix(splash): fix visualization artifacts (#1762) Rebuild and clean up visualization in Sketch. Include via an inline SVG rather than an `` tag. Add a `TODO` in regards to an even cleaner setup post build refactoring. Resolves #1752 * chore: pick up vote fix and update yarn lock file * chore(vote): pick up another vote patch * Update index.md (#423) * update: git merge -> git rebase * Update index.md * Update README.md * Update .travis.yml * docs: fix formatting and grammar (#1765) Fix typos, improve grammar, and change ` ` to a normal space character. * docs(concepts): change loader order from chonological to reverse (#1767) When one starts to learn about loaders it's very confusing. [This](https://webpack.js.org/contribute/writing-a-loader/#complex-usage) explains the behaviour much better. * update UPDATE.md * https://github.com/webpack-china/webpack.js.org/pull/422 * https://github.com/webpack-china/webpack.js.org/issues/40 * 您 -> 你 & 统一为：本指南继续沿用[xxx](/guides/xxx)中的代码示例 --- src/content/api/cli.md | 2 +- src/content/api/node.md | 2 +- src/content/branding.md | 2 +- src/content/guides/asset-management.md | 4 ++-- src/content/guides/caching.md | 2 +- src/content/guides/code-splitting.md | 2 +- src/content/guides/development.md | 2 +- src/content/guides/hot-module-replacement.md | 4 ++-- src/content/guides/installation.md | 2 +- src/content/guides/integrations.md | 2 +- src/content/guides/lazy-loading.md | 2 +- src/content/guides/migrating.md | 2 +- src/content/guides/output-management.md | 2 +- src/content/guides/production.md | 2 +- .../guides/progressive-web-application.md | 8 ++++---- src/content/guides/public-path.md | 2 +- src/content/guides/shimming.md | 2 +- src/content/guides/tree-shaking.md | 2 +- src/content/guides/typescript.md | 2 +- src/content/loaders/css-loader.md | 16 ++++++++-------- src/content/loaders/expose-loader.md | 2 +- src/content/loaders/html-loader.md | 6 +++--- src/content/loaders/json-loader.md | 2 +- src/content/loaders/less-loader.md | 4 ++-- src/content/loaders/react-proxy-loader.md | 4 ++-- src/content/loaders/style-loader.md | 6 +++--- src/content/loaders/svg-inline-loader.md | 2 +- .../plugins/babel-minify-webpack-plugin.md | 2 +- src/content/plugins/html-webpack-plugin.md | 8 ++++---- src/content/plugins/i18n-webpack-plugin.md | 2 +- 30 files changed, 51 insertions(+), 51 deletions(-) diff --git a/src/content/api/cli.md b/src/content/api/cli.md index 0c0bda477e18..f367c00dc7fe 100755 --- a/src/content/api/cli.md +++ b/src/content/api/cli.md @@ -42,7 +42,7 @@ webpack [] **``** -一个文件名或一组被命名的文件名，作为构建项目的入口起点。您可以传递多个入口（每个入口在启动时加载）。如果传递一个形式为 ` = ` 的键值对，则可以创建一个额外的入口起点。它将被映射到配置选项(configuration option)的 `entry` 属性。 +一个文件名或一组被命名的文件名，作为构建项目的入口起点。你可以传递多个入口（每个入口在启动时加载）。如果传递一个形式为 ` = ` 的键值对，则可以创建一个额外的入口起点。它将被映射到配置选项(configuration option)的 `entry` 属性。 **``** diff --git a/src/content/api/node.md b/src/content/api/node.md index 4212ff5cbee5..bd4695549453 100755 --- a/src/content/api/node.md +++ b/src/content/api/node.md @@ -136,7 +136,7 @@ T> 不允许在当前监听器已经关闭或失效前再次监听或执行。 ### 作废 `Watching`(Invalidate `Watching`) -使用 `watching.invalidate`，您可以手动使当前编译循环(compiling round)无效，而不会停止监视进程： +使用 `watching.invalidate`，你可以手动使当前编译循环(compiling round)无效，而不会停止监视进程： ``` js watching.invalidate(); diff --git a/src/content/branding.md b/src/content/branding.md index ecd4c7b7f3b0..c3af8aac05a4 100755 --- a/src/content/branding.md +++ b/src/content/branding.md @@ -96,4 +96,4 @@ The logo and the brand name are **not MIT licensed**. Please check [our LICENSE] *** -> 原文：https://webpack.js.org/branding/ \ No newline at end of file +> 原文：https://webpack.js.org/branding/ diff --git a/src/content/guides/asset-management.md b/src/content/guides/asset-management.md index d61fa39b59ca..885bf85f6cb5 100755 --- a/src/content/guides/asset-management.md +++ b/src/content/guides/asset-management.md @@ -257,9 +257,9 @@ Time: 895ms [9] ./src/index.js 503 bytes {0} [built] ``` -如果一切顺利，和 `Hello webpack` 文本旁边的 `img` 元素一样，现在看到的图标是重复的背景图片。如果您检查此元素，您将看到实际的文件名已更改为像 `5c999da72346a995e7e2718865d019c8.png` 一样。这意味着 webpack 在 `src` 文件夹中找到我们的文件，并成功处理过它！ +如果一切顺利，和 `Hello webpack` 文本旁边的 `img` 元素一样，现在看到的图标是重复的背景图片。如果你检查此元素，你将看到实际的文件名已更改为像 `5c999da72346a995e7e2718865d019c8.png` 一样。这意味着 webpack 在 `src` 文件夹中找到我们的文件，并成功处理过它！ -T> 合乎逻辑下一步是，压缩和优化您的图像。查看 [image-webpack-loader](https://github.com/tcoopman/image-webpack-loader) 和 [url-loader](/loaders/url-loader)，以了解更多关于如果增强加载处理图片功能。 +T> 合乎逻辑下一步是，压缩和优化你的图像。查看 [image-webpack-loader](https://github.com/tcoopman/image-webpack-loader) 和 [url-loader](/loaders/url-loader)，以了解更多关于如果增强加载处理图片功能。 ## 加载字体 diff --git a/src/content/guides/caching.md b/src/content/guides/caching.md index 8dc7bc010e03..f500724ed186 100755 --- a/src/content/guides/caching.md +++ b/src/content/guides/caching.md @@ -21,7 +21,7 @@ related: url: https://github.com/webpack/webpack.js.org/issues/652 --- -T> 本指南中的示例来自[起步](/guides/getting-started)、[管理输出](/guides/output-management)和[代码分离](/guides/code-splitting)。 +T> 本指南继续沿用[起步](/guides/getting-started)、[管理输出](/guides/output-management)和[代码分离](/guides/code-splitting)中的代码示例。 以上，我们使用 webpack 来打包我们的模块化后的应用程序，webpack 会生成一个可部署的 `/dist` 目录，然后把打包后的内容放置在此目录中。只要 `/dist` 目录中的内容部署到服务器上，客户端（通常是浏览器）就能够访问网站此服务器的网站及其资源。而最后一步获取资源是比较耗费时间的，这就是为什么浏览器使用一种名为[缓存](http://searchstorage.techtarget.com/definition/cache)的技术。可以通过命中缓存，以降低网络流量，使网站加载速度更快，然而，如果我们在部署新版本时不更改资源的文件名，浏览器可能会认为它没有被更新，就会使用它的缓存版本。由于缓存的存在，当你需要获取新的代码时，就会显得很棘手。 diff --git a/src/content/guides/code-splitting.md b/src/content/guides/code-splitting.md index 8e6a90072fb3..ad770fbcb613 100755 --- a/src/content/guides/code-splitting.md +++ b/src/content/guides/code-splitting.md @@ -23,7 +23,7 @@ contributors: - sudarsangp --- -T> 本指南扩展了[起步](/guides/getting-started)和[管理输出](/guides/output-management)中提供的示例。请确保您至少已熟悉其中提供的示例。 +T> 本指南继续沿用[起步](/guides/getting-started)和[管理输出](/guides/output-management)中的代码示例。。请确保你至少已熟悉其中提供的示例。 代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。 diff --git a/src/content/guides/development.md b/src/content/guides/development.md index c9fe265b04c2..7eaf163bb528 100755 --- a/src/content/guides/development.md +++ b/src/content/guides/development.md @@ -8,7 +8,7 @@ contributors: - TheDutchCoder --- -T> 本指南继续延伸[管理输出](/guides/output-management)指南中的代码示例。 +T> 本指南继续沿用[管理输出](/guides/output-management)指南中的代码示例。 如果你一直跟随之前的指南，应该对一些 webpack 基础知识有着很扎实的理解。在我们继续之前，先来看看如何建立一个开发环境，使我们的开发变得更容易一些。 diff --git a/src/content/guides/hot-module-replacement.md b/src/content/guides/hot-module-replacement.md index 1262cb78e279..793dca992a09 100755 --- a/src/content/guides/hot-module-replacement.md +++ b/src/content/guides/hot-module-replacement.md @@ -22,7 +22,7 @@ related: url: /api/hot-module-replacement --- -T> 本指南示例代码延用[开发](/guides/development)指南的示例代码。 +T> 本指南继续沿用[开发指南](/guides/development)中的代码示例。 模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。本页面重点介绍__实现__，而[概念页面](/concepts/hot-module-replacement)提供了更多关于它的工作原理以及为什么它有用的细节。 @@ -320,7 +320,7 @@ __index.js__ ``` -将 `body` 上的样式修改为 `background: red;`，您应该可以立即看到页面的背景颜色随之更改，而无需完全刷新。 +将 `body` 上的样式修改为 `background: red;`，你应该可以立即看到页面的背景颜色随之更改，而无需完全刷新。 __styles.css__ diff --git a/src/content/guides/installation.md b/src/content/guides/installation.md index 4ae07153e641..91e1b5c1ec71 100755 --- a/src/content/guides/installation.md +++ b/src/content/guides/installation.md @@ -47,7 +47,7 @@ T> 当你在本地安装 webpack 后，你能够从 `node_modules/.bin/webpack` npm install --global webpack ``` -W> 不推荐全局安装 webpack。这会将您项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。 +W> 不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。 ## 最新体验版本 diff --git a/src/content/guides/integrations.md b/src/content/guides/integrations.md index e0375c0b544c..91406b8ed385 100755 --- a/src/content/guides/integrations.md +++ b/src/content/guides/integrations.md @@ -10,7 +10,7 @@ contributors: 首先我们要消除一个常见的误解。webpack 是一个模块打包器(module bundler)（例如，[Browserify](http://browserify.org/) 或 [Brunch](http://brunch.io/)）。它不是一个任务执行器(task runner)（例如，[Make](https://www.gnu.org/software/make/), [Grunt](https://gruntjs.com/) 或者 [Gulp](https://gulpjs.com/) ）。任务执行器就是用来自动化处理常见的开发任务，例如项目的检查(lint)、构建(build)、测试(test)。相对于*打包器(bundler)*，任务执行器则聚焦在偏重上层的问题上面。你可以得益于，使用上层的工具，而将打包部分的问题留给 webpack。 -打包器(bundler)帮助您取得准备用于部署的 JavaScript 和样式表，将它们转换为适合浏览器的可用格式。例如，JavaScript 可以[压缩](/plugins/uglifyjs-webpack-plugin)、[拆分 chunk](/guides/code-splitting) 和[懒加载](/guides/lazy-loading)，以提高性能。打包是 web 开发中最重要的挑战之一，解决此问题可以消除开发过程中的大部分痛点。 +打包器(bundler)帮助你取得准备用于部署的 JavaScript 和样式表，将它们转换为适合浏览器的可用格式。例如，JavaScript 可以[压缩](/plugins/uglifyjs-webpack-plugin)、[拆分 chunk](/guides/code-splitting) 和[懒加载](/guides/lazy-loading)，以提高性能。打包是 web 开发中最重要的挑战之一，解决此问题可以消除开发过程中的大部分痛点。 好消息是，虽然有一些功能重复，但如果以正确的方式处理，任务运行器和模块打包器能够一起协同工作。本指南提供了关于如何将 webpack 与一些流行的任务运行器集成在一起的高度概述。 diff --git a/src/content/guides/lazy-loading.md b/src/content/guides/lazy-loading.md index d2d859b14fc8..e78daa9612c3 100755 --- a/src/content/guides/lazy-loading.md +++ b/src/content/guides/lazy-loading.md @@ -10,7 +10,7 @@ related: url: https://dzone.com/articles/lazy-loading-es2015-modules-in-the-browser --- -T> 这个指南是[代码分离](/guides/code-splitting)的后续，如果你之前没有看过那个指南，现在请去看一下。 +T> 本指南的继承自[代码分离](/guides/code-splitting)。如果你尚未阅读该指南，请先行阅读。 懒加载或者按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。 diff --git a/src/content/guides/migrating.md b/src/content/guides/migrating.md index fb78422ceb77..c6d9b0321648 100755 --- a/src/content/guides/migrating.md +++ b/src/content/guides/migrating.md @@ -267,7 +267,7 @@ loaders 的压缩模式将在 webpack 3 或后续版本中取消。 ## 默认加载 `OccurrenceOrderPlugin` `OccurrenceOrderPlugin` 现在默认启用，并已重命名（在 webpack 1 中为 `OccurenceOrderPlugin`）。 -因此，请确保从您的配置中删除该插件： +因此，请确保从你的配置中删除该插件： ``` diff plugins: [ diff --git a/src/content/guides/output-management.md b/src/content/guides/output-management.md index e64c717519c5..331a4c149ae4 100755 --- a/src/content/guides/output-management.md +++ b/src/content/guides/output-management.md @@ -8,7 +8,7 @@ contributors: - JGJP --- -T> 本指南继续延伸[`管理资源`](/guides/asset-management)指南中的代码示例。 +T> 本指南继续沿用[`管理资源`](/guides/asset-management)指南中的代码示例。 到目前为止，我们在 `index.html` 文件中手动引入所有资源，然而随着应用程序增长，并且一旦开始对[文件名使用哈希(hash)](/guides/caching)]并输出[多个 bundle](/guides/code-splitting)，手动地对 `index.html` 文件进行管理，一切就会变得困难起来。然而，可以通过一些插件，会使这个过程更容易操控。 diff --git a/src/content/guides/production.md b/src/content/guides/production.md index 36cd5fbc3fdc..455a2d96fd59 100755 --- a/src/content/guides/production.md +++ b/src/content/guides/production.md @@ -210,7 +210,7 @@ __webpack.prod.js__ T> 技术上讲，`NODE_ENV` 是一个由 Node.js 暴露给执行脚本的系统环境变量。通常用于决定在开发环境与生产环境(dev-vs-prod)下，服务器工具、构建脚本和客户端 library 的行为。然而，与预期不同的是，无法在构建脚本 `webpack.config.js` 中，将 `process.env.NODE_ENV` 设置为 `"production"`，请查看 [#2537](https://github.com/webpack/webpack/issues/2537)。因此，例如 `process.env.NODE_ENV === 'production' ? '[name].[hash].bundle.js' : '[name].bundle.js'` 这样的条件语句，在 webpack 配置文件中，无法按照预期运行。 -如果您正在使用像 [`react`](https://facebook.github.io/react/) 这样的 library，那么在添加此 DefinePlugin 插件后，你应该看到 bundle 大小显著下降。还要注意，任何位于 `/src` 的本地代码都可以关联到 process.env.NODE_ENV 环境变量，所以以下检查也是有效的： +如果你正在使用像 [`react`](https://facebook.github.io/react/) 这样的 library，那么在添加此 DefinePlugin 插件后，你应该看到 bundle 大小显著下降。还要注意，任何位于 `/src` 的本地代码都可以关联到 process.env.NODE_ENV 环境变量，所以以下检查也是有效的： __src/index.js__ diff --git a/src/content/guides/progressive-web-application.md b/src/content/guides/progressive-web-application.md index 5fba61feaa87..e3f4e15c21dd 100644 --- a/src/content/guides/progressive-web-application.md +++ b/src/content/guides/progressive-web-application.md @@ -1,11 +1,11 @@ --- -title: Progressive Web Application +title: 渐进式网络应用程序 sort: 14 contributors: - johnnyreilly --- -T> This guide extends on code examples found in the [Output Management](/guides/output-management) guide. +T> 本指南继续沿用[管理输出](/guides/output-management)中的代码示例。 Progressive Web Applications (or PWAs) are web apps that deliver an experience similar to native applications. There are many things that can contribute to that. Of these, the most significant is the ability for an app to be able to function when __offline__. This is achieved through the use of a web technology called [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers/). @@ -45,7 +45,7 @@ Available on: Hit CTRL-C to stop the server ``` -If you open your browser to `http://localhost:8080` (i.e. `http://127.0.0.1`) you should see your webpack application being served up from the `dist` directory. If you stop the server and refresh, the webpack application is no longer available. +If you open your browser to `http://localhost:8080` (i.e. `http://127.0.0.1`) you should see your webpack application being served up from the `dist` directory. If you stop the server and refresh, the webpack application is no longer available. This is what we aim to change. Once we reach the end of this module we should be able to stop the server, hit refresh and still see our application. @@ -79,7 +79,7 @@ __webpack.config.js__ - }) + }), + new WorkboxPlugin({ -+ // these options encourage the ServiceWorkers to get in there fast ++ // these options encourage the ServiceWorkers to get in there fast + // and not allow any straggling "old" SWs to hang around + clientsClaim: true, + skipWaiting: true diff --git a/src/content/guides/public-path.md b/src/content/guides/public-path.md index d773379ef37b..1eb932761db2 100755 --- a/src/content/guides/public-path.md +++ b/src/content/guides/public-path.md @@ -52,7 +52,7 @@ __webpack_public_path__ = process.env.ASSET_PATH; `process.env.ASSET_PATH` 就已经被定义了， 所以让我们能够安心地使用它了。 -**警告：**请注意，如果您在入口文件中使用 ES6 模块导入，则在导入后对 `__webpack_public_path__` 进行赋值。在这种情况下，您必须将公共路径(public path)赋值移至自己的专属模块，然后将其导入到您的 entry.js 之上： +**警告：**请注意，如果你在入口文件中使用 ES6 模块导入，则在导入后对 `__webpack_public_path__` 进行赋值。在这种情况下，你必须将公共路径(public path)赋值移至自己的专属模块，然后将其导入到你的 entry.js 之上： ```js // entry.js diff --git a/src/content/guides/shimming.md b/src/content/guides/shimming.md index d54aea2f2e6e..1dea4a6723dd 100755 --- a/src/content/guides/shimming.md +++ b/src/content/guides/shimming.md @@ -22,7 +22,7 @@ _shimming_ 另外一个使用场景就是，当你希望 [polyfill](https://en.w 下面的文章将向我们展示这两种用例。 -T> 为了方便，本指南沿用[起步](/guides/getting-started)章节中的代码示例。在继续之前，请确保你已经熟悉那些配置。 +T> 为了方便，本指南继续沿用[起步](/guides/getting-started)中的代码示例。在继续之前，请确保你已经熟悉那些配置。 ## shimming 全局变量 diff --git a/src/content/guides/tree-shaking.md b/src/content/guides/tree-shaking.md index cc1b889edb46..3c99402a528a 100755 --- a/src/content/guides/tree-shaking.md +++ b/src/content/guides/tree-shaking.md @@ -25,7 +25,7 @@ _tree shaking_ 是一个术语，通常用于描述移除 JavaScript 上下文 webpack 2 内置支持 ES2015 模块（别名 *harmony modules*），并能检测出未使用的模块导出。 -T> 本指南的继承自[起步指南](/guides/getting-started)。如果您尚未阅读该指南，请先行阅读。 +T> 本指南的继承自[起步指南](/guides/getting-started)。如果你尚未阅读该指南，请先行阅读。 ## 添加一个通用模块 diff --git a/src/content/guides/typescript.md b/src/content/guides/typescript.md index 330d5d13efad..9ff83d80670e 100755 --- a/src/content/guides/typescript.md +++ b/src/content/guides/typescript.md @@ -7,7 +7,7 @@ contributors: - mtrivera --- -T> 本指南示例来源于[*起步*](/guides/getting-started/)指南。 +T> 本指南继续沿用[*起步指南*](/guides/getting-started/)中的代码示例。 [TypeScript](https://www.typescriptlang.org) 是 JavaScript 的超集，为其增加了类型系统，可以编译为普通的 JavaScript 代码。这篇指南里我们将会学习 webpack 是如何跟 TypeScript 进行集成。 diff --git a/src/content/loaders/css-loader.md b/src/content/loaders/css-loader.md index 0f1b1f8d9d60..85df71b3c9fb 100644 --- a/src/content/loaders/css-loader.md +++ b/src/content/loaders/css-loader.md @@ -16,7 +16,7 @@ npm install --save-dev css-loader `css-loader` 解释(interpret) `@import` 和 `url()` ，会 `import/require()` 后再解析(resolve)它们。 -引用资源的合适 loader 是 [file-loader](/loaders/file-loader/)和 [url-loader](/loaders/url-loader/)，您应该在配置中指定（查看[如下设置](https://github.com/webpack-contrib/css-loader#assets)）。 +引用资源的合适 loader 是 [file-loader](/loaders/file-loader/)和 [url-loader](/loaders/url-loader/)，你应该在配置中指定（查看[如下设置](https://github.com/webpack-contrib/css-loader#assets)）。 **file.js** ```js @@ -39,7 +39,7 @@ module.exports = { ## -您也可以直接将 css-loader 的结果作为字符串使用，例如 Angular 的组件样式。 +你也可以直接将 css-loader 的结果作为字符串使用，例如 Angular 的组件样式。 **webpack.config.js** ```js @@ -62,8 +62,8 @@ console.log(css); // {String} 如果有 SourceMap，它们也将包含在字符串结果中。 -如果由于某种原因，您需要将 CSS 提取为纯粹的字符串资源（即不包含在 JS 模块中），则可能需要查看 [extract-loader](https://github.com/peerigon/extract-loader)。 -例如，当您需要将 CSS 作为字符串进行后处理时，这很有用。 +如果由于某种原因，你需要将 CSS 提取为纯粹的字符串资源（即不包含在 JS 模块中），则可能需要查看 [extract-loader](https://github.com/peerigon/extract-loader)。 +例如，当你需要将 CSS 作为字符串进行后处理时，这很有用。 **webpack.config.js** ```js @@ -110,7 +110,7 @@ console.log(css); // {String} `url(/image.png)` => `require('./image.png')` -不建议使用'相对根路径'的 url。您应该只将其用于旧版 CSS 文件。 +不建议使用'相对根路径'的 url。你应该只将其用于旧版 CSS 文件。 ### `url` @@ -179,7 +179,7 @@ url(~module/image.png) => require('module/image.png') 查询参数 `modules` 会启用 **CSS 模块**规范。 -默认情况下，这将启用局部作用域 CSS。（您可以使用 `:global(...)` 或 `:global` 关闭选择器 and/or 规则。 +默认情况下，这将启用局部作用域 CSS。（你可以使用 `:global(...)` 或 `:global` 关闭选择器 and/or 规则。 #### `Scope` @@ -242,7 +242,7 @@ file.png => ./file.png } ``` -您还可以通过自定义 `getLocalIdent` 函数来指定绝对路径，以根据不同的模式(schema)生成类名。这需要 `webpack >= 2.2.1`（`options` 对象支持传入函数）。 +你还可以通过自定义 `getLocalIdent` 函数来指定绝对路径，以根据不同的模式(schema)生成类名。这需要 `webpack >= 2.2.1`（`options` 对象支持传入函数）。 **webpack.config.js** ```js @@ -349,7 +349,7 @@ exports.locals = { 例如 extract-text-webpack-plugin 能够处理它们。 -默认情况下不启用它们，因为它们会导致运行时的额外开销，并增加了 bundle 大小 (JS source map 不会)。此外，相对路径是错误的，您需要使用包含服务器 URL 的绝对公用路径。 +默认情况下不启用它们，因为它们会导致运行时的额外开销，并增加了 bundle 大小 (JS source map 不会)。此外，相对路径是错误的，你需要使用包含服务器 URL 的绝对公用路径。 **webpack.config.js** ```js diff --git a/src/content/loaders/expose-loader.md b/src/content/loaders/expose-loader.md index 605a977f09c6..8db2fcf7e9c7 100644 --- a/src/content/loaders/expose-loader.md +++ b/src/content/loaders/expose-loader.md @@ -54,7 +54,7 @@ module: { ``` 除了暴露为 `window. $` 之外，假设你还想把它暴露为 `window.jQuery`。 -对于多个暴露，您可以在 loader 字符串中使用 `!`： +对于多个暴露，你可以在 loader 字符串中使用 `!`： webpack v1 用法 ```js diff --git a/src/content/loaders/html-loader.md b/src/content/loaders/html-loader.md index c803ccb94b8d..067983aae87d 100644 --- a/src/content/loaders/html-loader.md +++ b/src/content/loaders/html-loader.md @@ -14,9 +14,9 @@ npm i -D html-loader ## 用法 -默认情况下，每个本地的 `` 都需要通过 require （`require('./image.png')`）来进行加载。您可能需要在配置中为图片指定 loader（推荐 `file-loader` 或 `url-loader` ） +默认情况下，每个本地的 `` 都需要通过 require （`require('./image.png')`）来进行加载。你可能需要在配置中为图片指定 loader（推荐 `file-loader` 或 `url-loader` ） -您可以通过查询参数 `attrs`，来指定哪个标签属性组合(tag-attribute combination)应该被此 loader 处理。传递数组或以空格分隔的 `:` 组合的列表。（默认值：`attrs=img:src`） +你可以通过查询参数 `attrs`，来指定哪个标签属性组合(tag-attribute combination)应该被此 loader 处理。传递数组或以空格分隔的 `:` 组合的列表。（默认值：`attrs=img:src`） If you use ``, and lots of them make use of a `custom-src` attribute, you don't have to specify each combination `:`: just specify an empty tag like `attrs=:custom-src` and it will match every element. @@ -165,7 +165,7 @@ require("html-loader?root=.!./file.html"); ### 插值 -您可以使用 `interpolate` 标记，为 ES6 模板字符串启用插值语法，就像这样： +你可以使用 `interpolate` 标记，为 ES6 模板字符串启用插值语法，就像这样： ```js require("html-loader?interpolate!./file.html"); diff --git a/src/content/loaders/json-loader.md b/src/content/loaders/json-loader.md index a22f358912f2..c6b461283b35 100644 --- a/src/content/loaders/json-loader.md +++ b/src/content/loaders/json-loader.md @@ -12,7 +12,7 @@ repo: https://github.com/webpack-contrib/json-loader npm install --save-dev json-loader ``` -> ⚠️ **注意：由于 `webpack >= v2.0.0` 默认支持导入 JSON 文件。如果您使用自定义文件扩展名，您可能仍然需要使用此 loader。See the [v1.0.0 -> v2.0.0 Migration Guide](https://webpack.js.org/guides/migrating/#json-loader-is-not-required-anymore) for more information** +> ⚠️ **注意：由于 `webpack >= v2.0.0` 默认支持导入 JSON 文件。如果你使用自定义文件扩展名，你可能仍然需要使用此 loader。See the [v1.0.0 -> v2.0.0 Migration Guide](https://webpack.js.org/guides/migrating/#json-loader-is-not-required-anymore) for more information** ## 用法 diff --git a/src/content/loaders/less-loader.md b/src/content/loaders/less-loader.md index 48e5ed767e98..4c49106cff78 100644 --- a/src/content/loaders/less-loader.md +++ b/src/content/loaders/less-loader.md @@ -122,7 +122,7 @@ webpack 提供了一种[解析文件的高级机制](https://webpack.js.org/conf ##### Non-Less imports -使用 webpack resolver，您可以引入任何文件类型。您只需要一个导出有效的 Less 代码的 loader。通常，您还需要设置 `issuer` 条件，以确保此规则仅适用于 Less 文件的导入： +使用 webpack resolver，你可以引入任何文件类型。你只需要一个导出有效的 Less 代码的 loader。通常，你还需要设置 `issuer` 条件，以确保此规则仅适用于 Less 文件的导入： ```js // webpack.config.js @@ -227,7 +227,7 @@ module.exports = { Also checkout the [sourceMaps example](https://github.com/webpack-contrib/less-loader/tree/master/examples/sourceMaps). -如果您要编辑 Chrome 中的原始 Less 文件，[这里有一个很好的博客文章](https://medium.com/@toolmantim/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0)。此博客文章是关于 Sass 的，但它也适用于 Less。 +如果你要编辑 Chrome 中的原始 Less 文件，[这里有一个很好的博客文章](https://medium.com/@toolmantim/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0)。此博客文章是关于 Sass 的，但它也适用于 Less。 ### CSS modules gotcha diff --git a/src/content/loaders/react-proxy-loader.md b/src/content/loaders/react-proxy-loader.md index 9b575e36f6c0..9496bbf60523 100644 --- a/src/content/loaders/react-proxy-loader.md +++ b/src/content/loaders/react-proxy-loader.md @@ -21,7 +21,7 @@ var Component = require("react-proxy-loader!./Component"); var ComponentProxyMixin = require("react-proxy-loader!./Component").Mixin; // => 返回代理组件的 mixin -// （这允许您为 proxy 的加载状态设置渲染） +// （这允许你为 proxy 的加载状态设置渲染） var ComponentProxy = React.createClass({ mixins: [ComponentProxyMixin], renderUnavailable: function() { @@ -56,7 +56,7 @@ module.exports = { ## -您可以使用 `name` 查询参数为该 chunk 提供名称： +你可以使用 `name` 查询参数为该 chunk 提供名称： ``` js var Component = require("react-proxy-loader?name=chunkName!./Component"); diff --git a/src/content/loaders/style-loader.md b/src/content/loaders/style-loader.md index 55fe8217e3e5..f827774ad5a0 100644 --- a/src/content/loaders/style-loader.md +++ b/src/content/loaders/style-loader.md @@ -78,7 +78,7 @@ import url from 'file.css' ``` -> :信息来源: 使用 `url` 引用的 Source map 和资源：当 style-loader 与 `{ options: { sourceMap: true } }` 选项一起使用时，CSS 模块将生成为 `Blob`，因此相对路径无法正常工作（他们将相对于 `chrome:blob` 或 `chrome:devtools`）。为了使资源保持正确的路径，必须设置 webpack 配置中的 `output.publicPath` 属性，以便生成绝对路径。或者，您可以启用上面提到的 `convertToAbsoluteUrls` 选项。 +> :信息来源: 使用 `url` 引用的 Source map 和资源：当 style-loader 与 `{ options: { sourceMap: true } }` 选项一起使用时，CSS 模块将生成为 `Blob`，因此相对路径无法正常工作（他们将相对于 `chrome:blob` 或 `chrome:devtools`）。为了使资源保持正确的路径，必须设置 webpack 配置中的 `output.publicPath` 属性，以便生成绝对路径。或者，你可以启用上面提到的 `convertToAbsoluteUrls` 选项。 ### `可选的(Useable)` @@ -327,7 +327,7 @@ A new `