WebPack 管理输出
WebPack 管理
到目前为止，我们在 index.html 中手动引入所有资源，然而随着应用程序增长，并且一旦开始对名使用哈希(hash)]并多个 bundle，手动地对 index.html 进行管理，一切就会变得困难起来。然而，可以通过一些，会使这个过程更容易操控。
预先准备
首先，让我们调整一下我们的项目：
project
webpack-demo |- package.json |- webpack.con.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 ，来为 webpack 分离入口做好准备：
dist/index.html
<!doctype html> <html> <head> - <title>Asset Management F2er.com</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>
现在调整配置。我们将在 entry src/print.js 作为新的入口起点（print），然后 output，以便根据入口起点动态 bundle ：
webpack.con.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，然后看到如下：
Hash: aa305b0f3373c63c9051
Version: webpack 3.0.0
Time: 536ms
Asset Size Chunks Chunk Names
app.bundle.js 545 kB 0, 1 [emitted] [big] app
print.bundle.js 2.74 kB 1 [emitted] print
[0] ./src/print.js 84 bytes {0} {1} [built]
[1] ./src/index.js bytes {0} [built]
[3] (webpack)/buildin/global.js 509 bytes {0} [built]
[4] (webpack)/buildin/module.js 517 bytes {0} [built]
+ 1 hidden module
我们可以看到，webpack print.bundle.js 和 app.bundle.js ，这也和我们在 index.html 中指定的相对应。如果你在浏览器中打开 index.html，就可以看到在点击按钮时会发生什么。
但是，如果我们更改了我们的入口起点的，甚至了新的，会发生什么？的包将被在构建中，但是我们的index.html仍然会引用旧的名字。我们用 HtmlWebpackPlugin 来这个问题。
@L__1@设定 HtmlWebpackPlugin
首先安装，并且调整 webpack.con.js ：
npm install --save-dev html-webpack-plugin
webpack.con.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')
}
};
在我们构建之前，你应该了解，虽然在 dist/ 夹我们已经有 index.html 这个，然而 HtmlWebpackPlugin 还是会认 index.html 。这就是说，它会用新的 index.html ，把我们的原来的替换。让我们看下在执行 npm run build 后会发生什么：
Hash: 81f82697c19b5f49aebd
Version: webpack 2.6.1
Time: 854ms
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]
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] (webpack)/buildin/global.js 509 bytes {0} [built]
[2] (webpack)/buildin/module.js 517 bytes {0} [built]
[3] ./src/index.js 172 bytes {1} [built]
[4] multi lodash 28 bytes {0} [built]
Child html-webpack-plugin for "index.html":
[0] ./~/lodash/lodash.js 540 kB {0} [built]
[1] ./~/html-webpack-plugin/lib/loader.js!./~/html-webpack-plugin/default_index.ejs 538 bytes {0} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
如果你在编辑器中将 index.html 打开，你就会看到 HtmlWebpackPlugin 创建了全新的，所有的 bundle 会到 html 中。
如果你想要了解更多 HtmlWebpackPlugin 提供的全部和选项，那么你就应该多多熟悉 仓库。
你还可以看一下 ，除了认模板之外，还提供了一些额外的。
清理 /dist 夹
你可能已经注意到，由于过去的指南和示例遗留下来，导致我们的 /dist 夹相当杂乱。webpack 会，然后将这些放置在 /dist 夹中，但是 webpack 无法追踪到哪些是实际在项目中用到的。
通常，在每次构建前清理 /dist 夹，是比较推荐的做法，因此只会用到的。让我们完成这个需求。
是比较普及的管理，让我们安装和配置下。
npm install clean-webpack-plugin --save-dev
webpack.con.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']),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
现在执行 npm run build，再检查 /dist 夹。如果一切顺利，你现在应该不会再看到旧的，只有构建后的！
Manifest
你可能会感兴趣，webpack及其似乎“知道”应该哪些。答案是，通过 manifest，webpack 能够对「你的模块映射到 bundle 的过程」保持追踪。如果你对通过其他方式来管理 webpack 的更感兴趣，那么首先了解 manifest 是个好的开始。
通过使用 ，可以直接将数据到 json ，以供使用。
我们不会在此展示关于如何在你的项目中使用此的完整示例，但是你可以仔细深入阅读 manifest 的概念，以及通过缓存指南来弄清如何与长期缓存相关联。
结论
现在，你已经了解如何向 HTML 动态 bundle，让我们深入开发指南。或者，如果你想要深入更多相关高级话题，我们推荐你前往分离指南。
602392714
清零编程群