到目前为止，我们在 index.html 文件中手动引入所有资源，然而随着应用程序增长，并且一旦开始对文件名使用哈希(hash)]并输出多个 bundle，手动地对 index.html 文件进行管理，一切就会变得困难起来。然而，可以通过一些插件，会使这个过程更容易操控。

预先准备

  • 首先，调整一下项目：

    ``` // project

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

  • |- print.js |- /node_modules ```

  • 在 src/print.js 文件中添加一些逻辑：

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

  • 并且在 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 文件，来为 webpack 分离入口做好准备：

    ``` // dist/index.html

    <!doctype html>

  • ```

  • 现在调整配置。我们将在 entry 添加 src/print.js 作为新的入口起点（print），然后修改 output，以便根据入口起点名称动态生成 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’) } }; ```
  1. 运行一下
  2. npm run build

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

但是，如果我们更改了我们的一个入口起点的名称，甚至添加了一个新的名称，会发生什么？生成的包将被重命名在一个构 建中，但是我们的index.html文件仍然会引用旧的名字。我们用 HtmlWebpackPlugin 来解决这个问题。

设定 HtmlWebpackPlugin

  • 首先安装插件，并且调整 webpack.config.js 文件：

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

  • webpack.config.js

    ``` const path = require(‘path’);

  • const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

    module.exports = { entry: {

    1. app: './src/index.js',
    2. print: './src/print.js'

    },

  • plugins: [
  • new HtmlWebpackPlugin({
  • title: ‘Output Management’
  • })
  • ], output: { filename: ‘[name].bundle.js’, path: path.resolve(__dirname, ‘dist’) } }; ```
  1. 运行一下
  2. npm run build

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

如果你想要了解更多 HtmlWebpackPlugin 插件提供的全部功能和选项，那么你就应该多多熟悉 HtmlWebpackPlugin 仓库。

你还可以看一下 html-webpack-template，除了默认模板之外，还提供了一些额外的功能。

清理 /dist 文件夹

由于过去的指南和代码示例遗留下来，导致我们的 /dist 文件夹相当杂乱。webpack 会生成文件，然后将这些文件放置在 /dist 文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。

通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。让我们完成这个需求。

  • clean-webpack-plugin 是一个比较普及的管理插件，让我们安装和配置下。

    1. 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: {

    1. app: './src/index.js',
    2. print: './src/print.js'

    }, plugins: [

  • new CleanWebpackPlugin([‘dist’]), new HtmlWebpackPlugin({ title: ‘Output Management’ }) ], output: { filename: ‘[name].bundle.js’, path: path.resolve(__dirname, ‘dist’) } }; ```
  1. 运行一下
  2. npm run build

现在执行 npm run build，再检查 /dist 文件夹。如果一切顺利，你现在应该不会再看到旧的文件，只有构建后生成的文件。

Manifest

你可能会感兴趣，webpack及其插件似乎“知道”应该哪些文件生成。答案是，通过 manifest，webpack 能够对「你的模块映射到输出 bundle 的过程」保持追踪。如果你对通过其他方式来管理 webpack 的输出更感兴趣，那么首先了解 manifest 是个好的开始。

通过使用 WebpackManifestPlugin，可以直接将数据提取到一个 json 文件，以供使用。

我们不会在此展示一个关于如何在你的项目中使用此插件的完整示例，但是你可以仔细深入阅读 manifest 的概念页面，以及通过缓存指南来弄清如何与长期缓存相关联。