输出管理
这篇指南沿用了上一篇资源管理指南的代码。
目前位置我们手动包含了很多资源到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.
网友评论