本教程使用基于资源管理教程的代码示例
- 到目前为止我们手动在index.html中包含所有的资源，但是随着应用变得复杂或者一旦在文件名中使用哈希并输出多个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文件，准备然webpack拆分入口
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>
- 接下来调整配置文件。把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')
}
};
- 现在执行构建命令 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 403 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，你点击按钮就会看到会发生什么。
-
但是如果我们改变其中一个入口节点的名称或者添加一个新节点会发生什么？生成的bundles会在构建时重新命名，但是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目录已经有一个了。这意味着它将用新生成的index.html替换我们自己的。让我们看看构建之后会发生什么：
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已经创建一个新的文件并且所有的bundles都自动添加进来了。
清理 /dist 目录
-
通过之前的教程和代码示例，你可能注意到/dist文件是非常混乱的。Webpack会为你生成文件并放到/dist目录中，但是你很难追踪哪一个文件才是你的项目在使用的。
-
通常，在每一次构建之前，清理/dist目录是个好习惯，这样就只有需要使用的文件才会生成。我们来了解一下。
-
有一个专门用来管理这个的插件clean-webpack-plugin，我们安装和配置一下
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: {
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')
}
};
- 现在重新构建一下并检查一下/dist目录。如果一切正常，你应该只会看到构建生成的文件，不再有老的文件了。
清单
-
你可能想了解webpack和插件是怎么知道哪些文件是需要生成的。答案就是清单，webpack用来跟踪所有的模块是如何映射输出bundle的。如果你对webpack管理output的其他方式感兴趣，那么清单是很好的出发点。
-
可以使用WebpackManifestPlugin将清单数据提取到json文件中，以便于使用。
总结
- 现在，您已经了解了如何动态地将捆包添加到HTML中，接下来让我们深入研究开发教程。或者，如果您想深入研究更高级的主题，我们建议您去代码分割指南。
网友评论