diff --git a/src/components/Stats/StatsScript.js b/src/components/Stats/StatsScript.js
index ca8bb293ef2c..0bcdaa69387a 100644
--- a/src/components/Stats/StatsScript.js
+++ b/src/components/Stats/StatsScript.js
@@ -1,3 +1,5 @@
+import React from 'react';
+
const statsScript = `
var _hmt = _hmt || [];
(function() {
@@ -11,4 +13,4 @@ export default function StatsScript () {
return (
);
-}
+}
\ No newline at end of file
diff --git a/src/components/Vote/Vote.jsx b/src/components/Vote/Vote.jsx
new file mode 100644
index 000000000000..d7b4929c78ea
--- /dev/null
+++ b/src/components/Vote/Vote.jsx
@@ -0,0 +1,27 @@
+import { Component } from 'react';
+import Container from '../Container/Container';
+import 'webpack.vote/dist/style.min.css';
+
+// Load Styling
+import './Vote.scss';
+
+export default class Vote extends Component {
+ state = {
+ VoteApp: null,
+ };
+ componentDidMount() {
+ if (window && !window.__ssgrun) {
+ import('webpack.vote').then((VoteApp) => {
+ this.setState({ VoteApp: VoteApp.default || VoteApp });
+ });
+ }
+ }
+ render() {
+ const { VoteApp } = this.state;
+ return (
+
+ {VoteApp ? : null}
+
+ );
+ }
+}
diff --git a/src/components/Vote/Vote.scss b/src/components/Vote/Vote.scss
new file mode 100644
index 000000000000..2e2d8d110ca3
--- /dev/null
+++ b/src/components/Vote/Vote.scss
@@ -0,0 +1,6 @@
+.vote {
+ ul,
+ ol {
+ padding-left: 0;
+ }
+}
diff --git a/src/content/concepts/module-federation.mdx b/src/content/concepts/module-federation.mdx
index d4c996a5bba0..99b306cab7c6 100644
--- a/src/content/concepts/module-federation.mdx
+++ b/src/content/concepts/module-federation.mdx
@@ -93,7 +93,7 @@ packageName 选项允许通过设置包名来查找所需的版本。默认情
- 将提供所有匹配模块
- 将从图中这个位置的 package.json 提取 `requiredVersion`
- 当你有嵌套的 node_modules 时，可以提供和使用多个不同的版本
-- 共享中尾部带有 `/` 的模块请求将匹配所有具有这个前缀的模块请求
+- 共享中尾部带有 `/` 的模块请求将匹配所有具有这个前缀的模块请求
## 用例 $#use-cases$
@@ -107,7 +107,7 @@ packageName 选项允许通过设置包名来查找所需的版本。默认情
## 动态远程容器 $#dynamic-remote-containers$
-该容器接口支持 `get` 和 `init` 方法。
+该容器接口支持 `get` 和 `init` 方法。
`init` 是一个兼容 `async` 的方法，调用时，只含有一个参数：共享作用域对象(shared scope object)。此对象在远程容器中用作共享作用域，并由 host 提供的模块填充。
可以利用它在运行时动态地将远程容器连接到 host 容器。
@@ -337,7 +337,7 @@ ReactDOM.render(
, document.getElementById('root'));
这种方法有效，但存在局限性或缺点。
-通过 `ModuleFederationPlugin` 将依赖的 `eager` 属性设置为 `true`
+通过 `ModuleFederationPlugin` 将依赖的 `eager` 属性设置为 `true`
**webpack.config.js**
diff --git a/src/content/configuration/module.mdx b/src/content/configuration/module.mdx
index 7ae4325870c5..28d8d23f0d2d 100644
--- a/src/content/configuration/module.mdx
+++ b/src/content/configuration/module.mdx
@@ -670,12 +670,12 @@ module.exports = {
node: false, // 禁用 __dirname, __filename, module, require.extensions, require.main, 等。
commonjsMagicComments: false, // 禁用对 CommonJS 的 magic comments 支持
node: {}, // 在模块级别(module level)上重新配置 node 层(layer)
- worker: ['default from web-worker', '...'] // 自定义 WebWorker 对 JavaScript 的处理，其中 "..." 为默认值。
+ worker: ["default from web-worker", "..."] // 自定义 WebWorker 对 JavaScript 的处理，其中 "..." 为默认值。
}
}
]
}
-};
+}
```
如果 `Rule.type` 的值为 `asset`，那么 `Rules.parser` 选项可能是一个对象或一个函数，其作用可能是将文件内容编码为 Base64，还可能是将其当做单独文件 emit 到输出目录。
diff --git a/src/content/configuration/plugins.mdx b/src/content/configuration/plugins.mdx
index efe1f731734e..72ce2d734cbf 100644
--- a/src/content/configuration/plugins.mdx
+++ b/src/content/configuration/plugins.mdx
@@ -51,11 +51,11 @@ module.exports = {
//...
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
- // 编译时(compile time)插件
+ // 编译时(compile time)插件
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"',
}),
- // webpack-dev-server 强化插件
+ // webpack-dev-server 强化插件
new DashboardPlugin(),
new webpack.HotModuleReplacementPlugin(),
],
diff --git a/src/content/guides/asset-management.mdx b/src/content/guides/asset-management.mdx
index b584221b89bd..89fda4c310e3 100644
--- a/src/content/guides/asset-management.mdx
+++ b/src/content/guides/asset-management.mdx
@@ -18,15 +18,15 @@ translators:
- Yucohny
---
-如果是从一开始就沿用指南的示例，现在应该有一个可以显示“Hello webpack”的小项目。接下来尝试混合一些图像之类的其他资源，看看 webpack 如何处理。
+如果你是从一开始就沿用指南的示例，现在应该有一个显示 “Hello webpack” 的小项目。接下来我们尝试混合一些图像之类的其他资源，看看 webpack 如何处理。
-在 webpack 出现之前，前端开发人员会使用 [grunt](https://gruntjs.com/) 和 [gulp](https://gulpjs.com/) 等工具处理资源，并将它们从 `/src` 文件夹移动到 `/dist` 或 `/build` 目录中。JavaScript 模块也遵循同样的方式。但是，像 webpack 这样的工具将 **动态打包** 所有依赖并创建所谓的 [依赖图](/concepts/dependency-graph)。这是极好的创举，因为现在每个模块都可以 **明确表述它自身的依赖**，以避免打包未使用的模块。
+在 webpack 出现之前，前端开发人员会使用 [grunt](https://gruntjs.com/) 和 [gulp](https://gulpjs.com/) 等工具来处理资源，并将它们从 `/src` 文件夹移动到 `/dist` 或 `/build` 目录中。JavaScript 模块也遵循同样的方式，但是，像 webpack 这样的工具将 **动态打包** 所有依赖（创建所谓的 [依赖图](/concepts/dependency-graph)）。这是极好的创举，因为现在每个模块都可以 **明确表述它自身的依赖**，以避免打包未使用的模块。
-webpack 最出色的功能之一就是除了引入 JavaScript，还可以通过 loader 或内置的 [资源模块](/guides/asset-modules/) **引入任何其他类型的文件**。换言之，以上列出的那些 JavaScript 的优点（例如显式依赖），同样可以用来构建 web 站点或 web 应用程序中的所有非 JavaScript 内容。让我们从 CSS 开始起步，或许你可能已经熟悉了下面这些设置。
+webpack 最出色的功能之一就是除了引入 JavaScript，还可以通过 loader 或内置的 [Asset Modules](/guides/asset-modules/) **引入任何其他类型的文件**。换言之，以上列出的那些 JavaScript 的优点（例如显式依赖），同样可以用来构建 web 站点或 web 应用程序中的所有非 JavaScript 内容。让我们从 CSS 开始起步，或许你可能已经熟悉了下面这些设置。
## 设置 $#setup$
-在开始前对项目做一个小的修改：
+在开始之前，让我们对项目做一个小的修改：
**dist/index.html**
@@ -62,7 +62,7 @@ webpack 最出色的功能之一就是除了引入 JavaScript，还可以通过
## 加载 CSS $#loading-css$
-要想在 JavaScript 模块中导入 CSS 文件，需要安装 [style-loader](/loaders/style-loader) 和 [css-loader](/loaders/css-loader)，并在 [`module` 配置](/configuration/module) 中添加这些 loader：
+要想在 JavaScript 模块中 `import` CSS 文件，需要安装 [style-loader](/loaders/style-loader) 和 [css-loader](/loaders/css-loader)，并在 [`module` 配置](/configuration/module) 中添加这些 loader：
```bash
npm install --save-dev style-loader css-loader
@@ -96,7 +96,7 @@ module loader 可以链式调用。链中的每个 loader 都将对资源进行
T> webpack 根据正则表达式确定应该查找哪些文件，并将其提供给指定的 loader。在此示例中，所有以 `.css` 结尾的文件，都将被提供给 `style-loader` 和 `css-loader`。
-这些配置可以帮助在依赖于此样式的 JavaScript 文件中 `import './style.css'`。现在，在此模块执行过程中，含有 CSS 字符串的 `