[webpack3.8.1]Guides-4-Output Management（输出管理）-CSDN博客

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: 536ms
          Asset     Size  Chunks                    Chunk Names
  app.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: 854ms
           Asset       Size  Chunks                    Chunk Names
 print.bundle.js     544 kB       0  [emitted]  [big]  print
   app.bundle.js    2.81 kB       1  [emitted]         app
      index.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站的小伙伴们喜欢。