【WEBPACK v4.29.6 随缘翻译】输出管理

输出管理

这篇指南沿用了上一篇资源管理指南的代码。

目前位置我们手动包含了很多资源到index.html 文件中，但是当你的app变复杂，一旦你开始在文件中使用hashes并且将模块拆分为多个bundle，手动管理index.html将变得越来越困难。然而，有一些插件出现让这个过程变得更简单。

准备

首先，稍微校准一下我们的项目：

project

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

添加一些处理逻辑到 src/print.js 文件中：

src/print.js

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

在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());

同样更新我们的dist/index.html文件，在准备过程中拆分我们的入口：
dist/index.html

  <!doctype 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>

现在校准config文件。我们添加 src/print.js 作为一个新的入口点，并且同时改变output，一至于它可以基于entry porint名称动态地产生Bundle 名：

webpack.config.js

  const path = require('path');

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

运行npm run build ，看看它生成了什么文件名：

...
          Asset     Size  Chunks                    Chunk Names
  app.bundle.js   545 kB    0, 1  [emitted]  [big]  app
print.bundle.js  2.74 kB       1  [emitted]         print
...

可以看到webpack 生成了 print.bundle.js 和 app.bundle.js 文件。我们可以将这些文件指定到index.html中。如果你打开index.html，你可以看到当你点击按钮的时候发生了什么。

但是如果我们改变了其中一个入口点的名字会发生什么？或者甚至再添加一个入口点？生成的bundle 会再生成中重命名，但是index.html文件依然引用了旧的名字。现在使用htmlWebpackPlugin来修复这一过程.

设置 htmlWebpackPlugin

首先安装这个插件，并且调整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')
    }
  };

再我们构建之前，你需要知道htmlWebpackPlugin 默认生成自己的index.html文件，即便我们已经再dist/目录下有了一个。这意味着它生成的文件会替换我们原有的文件。看一下我们输入npm run build 发生了什么：

...
           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]
...

如果你使用代码编辑器打开index.html ，你会看到HtmlWebpackPlugin 已经创建了所有新的元素，并且所有的bundle都被自动添加进去。

像哟啊获取更多特性或者选项，可以查看 HtmlWebpackPlugin。

你同样可以看一下 html-webpack-template，它提供了两个额外的特性到默认模板中。

清理 /dist 目录

正如你可能注意到之前的指南，以及代码，我们的/dist 目录已经变得非常凌乱。 webpack 会生成文件并且放到/dist文件夹中，但是它不会追踪文件夹中你项目实际上要用到的文件。

一般来讲再构建Bundle之前清理/dist文件夹是很好的习惯，这样只有需要使用到的文件才会被webpack生成，现在让我们来处理这个问题。

有一个非常流行的管理这个的插件叫做 clean-webpack-plugin，让我们来安装并配置它：

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

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/*']) for < v2 versions of CleanWebpackPlugin
+     new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: 'Output Management'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

运行npm run build 并观察/dist 目录。如果一切顺利你应该看到只有当前被生成的文件存在于当前目录。

The Manifest

你可能会疑惑webpack以及插件是如何知道哪些文件被生成。答案就在 manifest 中， webpack 持续追踪module 图像到输出bundles。如果你对其他output 的管理感兴趣，manifest 是一个非常好的选择。

使用WebpackManifestPlugin可以让manifest数据可以被提取到json文件以便更方便的组装程序。

我们并不会教你如何使用这个插件，运用到你地项目中，但是你可以查看the concept page以及caching guide以理解这个组件如何执行。

总结

现在你已经学会动态添加bundles 到你地HTML中，现在地目标是：development guide。或者你想要深入高级地主题，我们会推荐你从头到尾阅读code splitting guide.