webpack 输出管理
准备
编辑项目
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- /src
|- index.js
+ |- print.js
|- /node_modules
# 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 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
<!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>
我们可以看到webpack生成了print.bundle.js和app.bundle.js文件，我们也在index.html文件中指定了这些文件。 如果您在浏览器中打开index.html，则可以看到单击按钮时会发生什么。
tips :
如果我们更改了其中一个入口点的名称，或者甚至添加了新入口点，会发生什么？
生成的包将在构建时重命名，但我们的index.html文件仍将引用旧名称。 让我们用HtmlWebpackPlugin解决这个问题。
设置 HtmlWebpackPlugin
安装依赖
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文件替换我们的index.html文件。
如果您在代码编辑器中打开index.html，您将看到HtmlWebpackPlugin为您创建了一个全新的文件，并且所有的bundle都会自动添加。
如果您想了解有关HtmlWebpackPlugin提供的所有功能和选项的更多信息，那么您应该在HtmlWebpackPlugin repo上阅读它。
您还可以查看html-webpack-template，除了默认模板之外，还提供了一些额外的功能。
编译前清空 /dist 目录
现在你已经知道上一个例子中，/dist目录变得非常杂乱。wepack 会为你生成文件并放进 /dist 目录中,但它不会跟踪哪些文件是真实被你的项目所使用。
一般来说，在每次编译项目到/dist中先清空一下/dist的内容，是一种很好的做法，从而保证目录下的文件都是最新且被项目实实在在应用到的。
一个常用的插件是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
# npx webpack
编译成功后你会发现，/dist内不会有多余的文件，因为所有老的文件都先被删除了。
Manifest 应用缓存配置
你可能会好奇，为什么 webpack 会知道有哪些文件正在被创建？答案在于manifest，它让 webpack 能够跟踪所有 modules 是怎么样映射到输出的 bundles 中的。
如果你对用其他方式管理 webpack 输出的话，manifest 是一个好的起点。
manifest 的数据可以被提取到一个 json 文件中，它会被 WebpackManifestPlugin 很容易地使用。
需要深入了解长远地缓存配置方案，请查看 the concept page 和 caching guide
NEXT
现在，我们已经知道怎么样去动态的捆绑代码 bundles 并添加到你的 html 中。如果你有兴趣深入更多关于 output 的高级配置，请阅读 code splitting guide。
