共计 2738 个字符，预计需要花费 7 分钟才能阅读完成。
到目前为止，我们在 index.html 文件中手动引入所有资源，然而随着应用程序增长，并且一旦开始对文件名使用哈希 (hash)] 并输出多个 bundle，手动地对 index.html 文件进行管理，一切就会变得困难起来。然而，可以通过一些插件，会使这个过程更容易操控。
预先准备
调整项目结构
src/print.js
export default function printMe() {
console.log(‘I get called from print.js!’);
}
src/index.js
import _ 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.js
const 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
