HTML相关
html-webpack-plugin
HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个HTML文件，使用lodash模板提供你自己的模板，或使用你自己的loader。
- npm安装地址：https://www.npmjs.com/package/html-webpack-plugin
- webpack使用：https://webpack.docschina.org/plugins/html-webpack-plugin/
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
module.exports = {
entry: 'index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
};
这将会产生一个包含以下内容的文件 dist/index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>
html-minifier
HTMLMinifier是一个高度可配置的，经过良好测试的，基于javascript的HTML minifier。
var minify = require('html-minifier').minify;
var result = minify('<p title="blah" id="moo">foo</p>', {
removeAttributeQuotes: true
});
result; // '<p title=blah id=moo>foo</p>'
html-loader
将HTML导出为字符串。当编译器需要时，HTML被最小化。
- npm安装地址：https://www.npmjs.com/package/html-loader
- webpack使用：https://webpack.docschina.org/loaders/html-loader/
{
test: /\.(html)$/,
use: {
loader: 'html-loader',
options: {
attrs: [':data-src']
}
}
}