Output Management

This guide extends on code examples found in the Asset Management guide.

???????這個指南將在上一個指南的基礎上對示例代碼進行擴展。

So far we've manually included all our assets in our index.html file, but as your application grows and once you start using hashes in filenames and outputting multiple bundles, it will be difficult to keep managing your index.html file manually. However, a few plugins exist that will make this process much easier to manage.

???????到現在為止，我們已經給index.html手動包含了所有的資源，但是，一旦開始使用哈希值為文件名并輸出多個包，index.html將難以手動管理文件。然而，有一些插件可以使這個過程更容易管理。

Preparation （預備）

First, let's adjust our project a little bit:

???????首先，讓我們調整一下我們的項目：

project

  webpack-demo|- package.json|- webpack.config.js|- /dist|- /src|- index.js
+   |- print.js|- /node_modules

Let's add some logic to our src/print.js file:

???????讓我們添加一些邏輯到src/print.js

src/print.js

export default function printMe() {console.log('I get called from print.js!');
}

And use that function in our src/index.js file:

??????? 在我們的src/index.js使用那個函數吧。

src/index.js

  import _ from 'lodash';
+ import printMe from './print.js';function component() {var element = document.createElement('div');
+   var btn = document.createElement('button');element.innerHTML = _.join(['Hello', 'webpack'], ' ');+   btn.innerHTML = 'Click me and check the console!';
+   btn.onclick = printMe;
+
+   element.appendChild(btn);return element;}document.body.appendChild(component());

Let's also update our dist/index.html file, in preparation for webpack to split out entries:

??????? 我們也給我們的dist/index.html升升級，準備webpack拆分條目。

dist/index.html

  <html><head>
-     <title>Asset Management</title>
+     <title>Output Management</title>
+     <script src="./print.bundle.js"></script></head><body>
-     <script src="./bundle.js"></script>
+     <script src="./app.bundle.js"></script></body></html>

Now adjust the config. We'll be adding our src/print.js as a new entry point (print) and we'll change the output as well, so that it will dynamically generate bundle names, based on the entry point names:

??????? 現在，調整配置。我們將要添加我們的src/print.js作為一個新的條目，而且，我們還要改變輸出，以便于它能夠動態地生成基于入口點名稱的捆綁后的名稱。

webpack.config.js

  const path = require('path');module.exports = {entry: {
-     index: './src/index.js',
+     app: './src/index.js',
+     print: './src/print.js'},output: {
-     filename: 'bundle.js',
+     filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')}};

Let's run npm run build and see what this generates:

???????讓我們運行npm run build，看看生成了什么：

Hash: aa305b0f3373c63c9051
Version: webpack 3.0.0
Time: 536msAsset     Size  Chunks                    Chunk Namesapp.bundle.js   545 kB    0, 1  [emitted]  [big]  app
print.bundle.js  2.74 kB       1  [emitted]         print[0] ./src/print.js 84 bytes {0} {1} [built][1] ./src/index.js 403 bytes {0} [built][3] (webpack)/buildin/global.js 509 bytes {0} [built][4] (webpack)/buildin/module.js 517 bytes {0} [built]+ 1 hidden module

We can see that webpack generates our print.bundle.js and app.bundle.js files, which we also specified in our index.html file. if you open index.html in your browser, you can see what happens when you click the button.

???????我們可以看到，webpack生成了我們的print.bundle.js和app.bundle.js還有很多我們在index.html中定義的文件。如果你在瀏覽器中打開index.html，當你點擊按鈕時你就可以看到發生了什么。

But what would happen if we changed the name of one of our entry points, or even added a new one? The generated bundles would be renamed on a build, but our index.html file would still reference the old names. Let's fix that with the HtmlWebpackPlugin.

???????但是，如果我們把其中一個入口點改名，會發生什么呢？更甚者，我們添加了一個新的會發生什么呢？我們生成的打包的文件將會在編譯中重命名，但是我們的index.html文件仍然關聯的是舊文件名。讓我們使用HtmlWebpackPlugin來修復這個bug。

Setting up HtmlWebpackPlugin （啟動HtmlWebpackPlugin）

First install the plugin and adjust the webpack.config.js file:

???????首先，安裝插件，調整webpack.config.js文件：

npm install --save-dev html-webpack-plugin

webpack.config.js

  const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: {app: './src/index.js',print: './src/print.js'},
+   plugins: [
+     new HtmlWebpackPlugin({
+       title: 'Output Management'
+     })
+   ],output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')}};

Before we do a build, you should know that the HtmlWebpackPlugin by default will generate its own index.html file, even though we already have one in the dist/ folder. This means that it will replace our index.html file with a newly generated one. Let's see what happens when we do an npm run build:

???????在我們開始一個編譯之前，你應當知道HtmlWebpackPlugin是會默認創建一個index.html的，即便我們已經有一個放在dist/文件夾里了(｀?ω?′)。這就意味著呀，我們的index.html將會被覆蓋 Σ(っ°Д°;)っ讓我們來看一下，當我們運行npm run build會發生什么吧：

Hash: 81f82697c19b5f49aebd
Version: webpack 2.6.1
Time: 854msAsset       Size  Chunks                    Chunk Namesprint.bundle.js     544 kB       0  [emitted]  [big]  printapp.bundle.js    2.81 kB       1  [emitted]         appindex.html  249 bytes          [emitted][0] ./~/lodash/lodash.js 540 kB {0} [built][1] (webpack)/buildin/global.js 509 bytes {0} [built][2] (webpack)/buildin/module.js 517 bytes {0} [built][3] ./src/index.js 172 bytes {1} [built][4] multi lodash 28 bytes {0} [built]
Child html-webpack-plugin for "index.html":[0] ./~/lodash/lodash.js 540 kB {0} [built][1] ./~/html-webpack-plugin/lib/loader.js!./~/html-webpack-plugin/default_index.ejs 538 bytes {0} [built][2] (webpack)/buildin/global.js 509 bytes {0} [built][3] (webpack)/buildin/module.js 517 bytes {0} [built]

If you open index.html in your code editor, you'll see that the HtmlWebpackPlugin has created an entirely new file for you and that all the bundles are automatically added.

???????如果你在你的代碼編輯器中打開了index.html，你將會看到HtmlWebpackPlugin已經為你創建了一個全新的文件，而且所有需要捆綁的文件都已經自動地添加上了。

If you want to learn more about all the features and options that the HtmlWebpackPlugin provides, then you should read up on it on the HtmlWebpackPlugin repo.

???????如果你想學習更多HtmlWebpackPlugin提供的關于特性和選項的內容，然后你應當專門攻讀HtmlWebpackPlugin的報告。

You can also take a look at html-webpack-template which provides a couple of extra features in addition to the default template.

???????你也可以稍微看看html-webpack-template，它提供了一組默認模板額外的特性。

Cleaning up the /dist folder （/dist文件夾大掃除）

As you might have noticed over the past guides and code example, our /dist folder has become quite cluttered. Webpack will generate the files and put them in the /dist folder for you, but it doesn't keep track of which files are actually in use by your project.

???????你應該也注意到了，經過一系列的指南和咱們的代碼例子，咱這個/dist文件夾啊，已經非常凌亂了(╬￣皿￣)。

In general it's good practice to clean the /dist folder before each build, so that only used files will be generated. Let's take care of that.

???????通常來說，在每一次編譯之前清理/dist文件夾是一種優良品格(～￣▽￣)～ 。這樣呀，只有真正被使用的文件才會生成。讓我們來處理一下吧。

popular plugin to manage this is the clean-webpack-plugin so let's install and configure it.

???????clean-webpack-plugin是所有做這類事情的流行插件中的一個，那么好，我們來安裝和配置一下它吧！

npm install clean-webpack-plugin --save-dev

webpack.config.js

  const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {entry: {app: './src/index.js',print: './src/print.js'},plugins: [
+     new CleanWebpackPlugin(['dist']),new HtmlWebpackPlugin({title: 'Output Management'})],output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')}};

Now run an npm run build and inspect the /dist folder. If everything went well you should now only see the files generated from the build and no more old files!

???????現在(?ˉ?ˉ?)，我們運行npm run build并且監視/dist文件夾，如果一切正常，你將只會看到編譯后的文件，之前的舊文件沒啦！

The Manifest （清單）

You might be wondering how webpack and its plugins seem to "know" what files are being generated. The answer is in the manifest that webpack keeps to track how all the modules map to the output bundles. If you're interested in managing webpack's output in other ways, the manifest would be a good place to start.

???????你也許會好奇，webpack和它的插件是怎么知道哪些文件是需要生成的，哪些沒用呢？答案是這樣的，webpack會一直跟蹤更新一個清單，這個清單上會記錄所有的模塊到輸出的映射關系。如果你對于使用其它方式來管理webpack的輸出，manifest是一個不錯的選擇。

The manifest data can be extracted into a json file for easy consumption using the WebpackManifestPlugin.

???????清單數據可以提取到一個JSON文件，以便于使用WebpackManifestPlugin。

We won't go through a full example of how to use this plugin within your projects, but you can read up on the concept page and the caching guide to find out how this ties into long term caching.

???????我們將不會詳細介紹如何在您的項目中使用這個插件，但是您可以閱讀概念頁面和緩存指南，了解這些內容如何與長期緩存聯系起來。

Conclusion （總結一下）

Now that you've learned about dynamically adding bundles to your HTML, let's dive into the development guide. Or, if you want to dig into more advanced topics, we would recommend heading over to the code splitting guide.

???????現在，你已經學習了有關如何動態添加綁定到你的HTML，讓我們一頭扎進開發指南的海洋里吧。或者，如果你想深挖更多的更高級的主題，我們強烈推薦您趕緊踏上代碼分割指南的征途。

P.S.:本來想很嚴肅地翻譯官網的指南來著，突然間發現沒幾個小盆友看，￣へ￣，干脆加點自己喜歡的宅文化表情。希望愛逛B站的小伙伴們喜歡。