Skip to content

Commit ab392ef

Browse files
authored
docs(cn): improve translation and adjust format
1 parent 449ffd5 commit ab392ef

File tree

1 file changed

+13
-12
lines changed

1 file changed

+13
-12
lines changed

src/content/guides/output-management.mdx

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ contributors:
1010
- AnayaDesign
1111
- chenxsan
1212
- snitin315
13+
- Yucohny
1314
translators:
1415
- QC-L
1516
- jacob-lcs
@@ -18,7 +19,7 @@ translators:
1819

1920
T> 本指南继续沿用 [`管理资源`](/guides/asset-management) 指南中的代码示例。
2021

21-
到目前为止,我们都是在 `index.html` 文件中手动引入所有资源,然而随着应用程序增长,并且一旦开始 [在文件名中使用 hash](/guides/caching) 并输出 [多个 bundle](/guides/code-splitting)如果继续手动管理 `index.html` 文件,就会变得困难起来。然而,通过一些插件可以使这个过程更容易管控
22+
到目前为止,我们都是在 `index.html` 文件中手动引入所有资源,然而随着应用程序增长,一旦开始 [使用哈希值进行文件命名](/guides/caching) 并输出 [多个 bundle](/guides/code-splitting)手动管理 `index.html` 文件将变得困难。然而,使用一些插件可以让这个过程更容易管理
2223

2324
## 预先准备 $#preparation$
2425

@@ -93,7 +94,7 @@ export default function printMe() {
9394
</html>
9495
```
9596

96-
现在调整配置。我们将在 entry 添加 `src/print.js` 作为新的入口起点(`print`),然后修改 output,以便根据入口起点定义的名称,动态地产生 bundle 名称:
97+
现在调整配置。我们将在 entry 添加 `src/print.js` 作为新的入口起点(`print`),然后修改 output,以便根据入口起点定义的名称,动态地生成 bundle 名称:
9798

9899
**webpack.config.js**
99100

@@ -114,7 +115,7 @@ export default function printMe() {
114115
};
115116
```
116117

117-
执行 `npm run build`然后看到生成如下
118+
执行 `npm run build`然后看到输出如下
118119

119120
```bash
120121
...
@@ -129,9 +130,9 @@ cacheable modules 530 KiB
129130
webpack 5.4.0 compiled successfully in 1996 ms
130131
```
131132

132-
我们可以看到,webpack 生成 `print.bundle.js``index.bundle.js` 文件,这也和我们在 `index.html` 文件中指定的文件名称相对应。如果你在浏览器中打开 `index.html`就可以看到在点击按钮时会发生什么
133+
可以看到,webpack 将会生成 `print.bundle.js``index.bundle.js` 文件,这也和我们在 `index.html` 文件中指定的文件名称相对应。试试在浏览器中打开 `index.html`看看点击按钮时会发生什么
133134

134-
但是,如果我们更改了我们的一个入口起点的名称,甚至添加了一个新的入口,会发生什么?会在构建时重新命名生成的 bundle,但是我们的 `index.html` 文件仍然引用旧的名称。让我们用 [`HtmlWebpackPlugin`](/plugins/html-webpack-plugin) 来解决这个问题。
135+
但是,如果更改入口起点的名称,甚至添加一个新的入口,会在构建时重新命名生成的 bundle, `index.html` 仍然在引用旧的名称。可以使用 [`HtmlWebpackPlugin`](/plugins/html-webpack-plugin) 来解决这个问题。
135136

136137
## 设置 HtmlWebpackPlugin $#setting-up-htmlwebpackplugin$
137138

@@ -164,7 +165,7 @@ npm install --save-dev html-webpack-plugin
164165
};
165166
```
166167

167-
在我们构建之前,你应该了解,虽然在 `dist/` 文件夹我们已经有了 `index.html` 这个文件,然而 `HtmlWebpackPlugin` 还是会默认生成它自己的 `index.html` 文件。也就是说,它会用新生成的 `index.html` 文件,替换我们的原有文件。我们看下执行 `npm run build` 后会发生什么:
168+
在执行构建之前,你应该了解,虽然在 `dist/` 文件夹我们已经有了 `index.html` 这个文件,然而 `HtmlWebpackPlugin` 还是会默认生成它自己的 `index.html` 文件。也就是说,它会用新生成的 `index.html` 文件,替换我们的原有文件。看看执行 `npm run build` 后会发生什么:
168169

169170
```bash
170171
...
@@ -182,13 +183,13 @@ webpack 5.4.0 compiled successfully in 2189 ms
182183

183184
如果在代码编辑器中打开 `index.html`,你会看到 `HtmlWebpackPlugin` 创建了一个全新的文件,所有的 bundle 会自动添加到 html 中。
184185

185-
如果你想要了解 `HtmlWebpackPlugin` 插件提供的全部的功能和选项,你就应该阅读 [`HtmlWebpackPlugin`](https://github.com/jantimon/html-webpack-plugin) 仓库中的源码。
186+
如果想要了解 `HtmlWebpackPlugin` 插件提供的全部的功能和选项,请阅读 [`HtmlWebpackPlugin`](https://github.com/jantimon/html-webpack-plugin) 仓库中的源码。
186187

187188
## 清理 `/dist` 文件夹 $#cleaning-up-the-dist-folder$
188189

189-
你可能已经注意到,由于遗留了之前的指南和代码示例,我们的 `/dist` 文件夹显得相当杂乱。webpack 将生成文件并放置在 `/dist` 文件夹中,但是它不会追踪哪些文件是实际在项目中用到的。
190+
你可能已经注意到,由于遗留了之前的指南的代码示例,`/dist` 文件夹显得相当杂乱。webpack 将生成文件并放置在 `/dist` 文件夹中,但是它不会追踪哪些文件是实际在项目中用到的。
190191

191-
通常比较推荐的做法是,在每次构建前清理 `/dist` 文件夹,这样只会生成用到的文件。让我们使用 [`output.clean`](/configuration/output/#outputclean) 配置项实现这个需求。
192+
通常比较推荐的做法是,在每次构建前清理 `/dist` 文件夹,这样只会生成用到的文件。可以使用 [`output.clean`](/configuration/output/#outputclean) 配置项实现这个需求。
192193

193194
**webpack.config.js**
194195

@@ -214,16 +215,16 @@ webpack 5.4.0 compiled successfully in 2189 ms
214215
};
215216
```
216217

217-
现在,执行 `npm run build`,检查 `/dist` 文件夹。如果一切顺利,现在只会看到构建后生成的文件,而没有旧文件!
218+
现在,执行 `npm run build` 后检查 `/dist` 文件夹。如果一切顺利,现在只会看到构建后生成的文件,而没有旧文件!
218219

219220
## manifest $#the-manifest$
220221

221-
你可能会很感兴趣,webpack 和 webpack 插件似乎“知道”应该生成哪些文件。答案是,webpack 通过 manifest,可以追踪所有模块到输出 bundle 之间的映射。如果你想要知道如何以其他方式来控制 webpack [`输出`](/configuration/output),了解 manifest 是个好的开始。
222+
你可能会很感兴趣,webpack 和 webpack 插件似乎“知道”应该生成哪些文件——webpack 通过 manifest 追踪所有模块到输出 bundle 之间的映射。如果你想要知道如何以其他方式来控制 webpack [`输出`](/configuration/output),了解 manifest 是个好的开始。
222223

223224
通过 [`WebpackManifestPlugin`](https://github.com/shellscape/webpack-manifest-plugin) 插件,可以将 manifest 数据提取为一个 json 文件以供使用。
224225

225226
我们不会在此展示一个如何在项目中使用此插件的完整示例,你可以在 [manifest](/concepts/manifest) 概念页面深入阅读,以及在 [缓存](/guides/caching) 指南中,了解它与长效缓存有何关系。
226227

227-
## 结论 $#conclusion$
228+
## 总结 $#conclusion$
228229

229230
现在,你已经了解如何向 HTML 动态添加 bundle,让我们深入 [开发环境](/guides/development) 指南。或者如果你想要深入更多相关高级话题,我们推荐你前往 [代码分离](/guides/code-splitting) 指南。

0 commit comments

Comments
 (0)