到目前为止，我们在 index.html 文件中手动引入所有资源，然而随着应用程序增长，并且一旦开始对文件名使用哈希(hash)]并输出多个 bundle，手动地对 index.html 文件进行管理，一切就会变得困难起来。然而，可以通过一些插件，会使这个过程更容易操控。预先准备调整项目结构src/print.jsexport default function printMe() { console.log(‘I get called from print.js!’);}src/index.jsimport _ from ’lodash’import printMe from ‘./print.js’function component () { var ele = document.createElement(‘div’) var btn = document.createElement(‘button’) ele.innerHTML = _.join([‘hello’, ‘webpack’], ’ ‘) btn.innerHTML = ‘click me and check the console’ btn.onclick = printMe ele.appendChild(btn) return ele;}document.body.appendChild(component());修改dist/index.html 为webpack 分离入口做好准备<!doctype html><html> <head> <title>Output Management</title> <script src="./print.bundle.js"></script> </head> <body> <script src="./app.bundle.js"></script> </body></html>修改webpack.config.js 新增一个print入口起点，然后修改 output，以便根据入口起点名称动态生成 bundle 名称：const path = require(‘path’)module.exports = { entry: { app: ‘./src/index.js’, print: ‘./src/print.js’ } output: { filename: ‘[name].bundle.js’ // __dirname表示当前文件所在的目录的绝对路径 path: path.resolve(__dirname, ‘dist’) }};执行构建命令cnpm run build在浏览器中打开index.html点击按钮，。。。但是，如果我们更改了我们的一个入口起点的名称，甚至添加了一个新的名称，会发生什么？生成的包将被重命名在一个构建中，但是我们的index.html文件仍然会引用旧的名字。我们用 HtmlWebpackPlugin 来解决这个问题。设定 HtmlWebpackPlugin安装插件cnpm install –save-dev html-webpack-plugin修改webpack.config.jsconst path = require(‘path’)const HtmlWebpackPlugin = require(‘html-webpack-plugin’) // 引入htmwebpackplugin插件module.exports = { entry: { app: ‘./src/index.js’, print: ‘./src/print.js’ }, plugins: [ new HtmlWebpackPlugin({// 使用htmwebpackplugin插件 title: ‘Output Management’ }) ], output: { filename: ‘[name].bundle.js’, // __dirname表示当前文件所在的目录的绝对路径 path: path.resolve(__dirname, ‘dist’) }};再次构建 cnpm run build之前在dist文件夹中有一个我们自己建的index.html文件，我们为这个文件手动引入bundle，使用htmlwebpackplugin之后，会默认生成一个index.html文件，替换掉原来我们手动添加的index.html文件,并且文件中会自动添加所有的bundle<!DOCTYPE html><html> <head> <meta charset=“UTF-8”> <title>Output Management</title> </head> <body> <script type=“text/javascript” src=“app.bundle.js”></script><script type=“text/javascript” src=“print.bundle.js”></script></body></html>清理dist文件夹你可能已经注意到，由于过去的指南和代码示例遗留下来，导致我们的 /dist 文件夹相当杂乱。webpack 会生成文件，然后将这些文件放置在 /dist 文件夹中，但是 webpack 无法追踪到哪些文件是实际在项目中用到的。通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。让我们完成这个需求。安装clean-webpack-plugin 是一个比较普及的管理插件cnpm install clean-webpack-plugin –save-dev修改webpack.config.js文件const path = require(‘path’)const HtmlWebpackPlugin = require(‘html-webpack-plugin’) // 引入htmwebpackplugin插件const CleanWebpackPlugin = require(‘clean-webpack-plugin’) // 引入CleanWebpackPlugin插件module.exports = { entry: { app: ‘./src/index.js’, print: ‘./src/print.js’ }, plugins: [ new CleanWebpackPlugin([‘dist’]), new HtmlWebpackPlugin({// 使用htmwebpackplugin插件 title: ‘Output Management’ }) ], output: { filename: ‘[name].bundle.js’, // __dirname表示当前文件所在的目录的绝对路径 path: path.resolve(__dirname, ‘dist’) }};执行cnpm run build 查看dist文件夹，就只有构建后新生成的文件了Manifest