在 10-webpack自动生成 index.html 之后，开始使用 html-webpack-plugin 自动生成的 html 文件，压缩功能也要通过他来完成。
一、编辑 webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: './src/index.js',
mode:"none",//方便看代码未处理样式
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins:[
new HtmlWebpackPlugin({
title: "14- webpack 压缩 index 代码",
}),
]
};
二、未压缩的 index.html 文件
构建代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>14- webpack 压缩 index 代码</title>
</head>
<body>
<script type="text/javascript" src="main.bundle.js"></script></body>
</html>
三、编辑 webpack.config.js ，配置 minify
经过测试设置对象，设置 true、false 无效
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: './src/index.js',
mode:"none",//方便看代码未处理样式
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins:[
new HtmlWebpackPlugin({
title: "14- webpack 压缩 index 代码",
minify: {
collapseWhitespace: true,//删除空格、换行
},
}),
]
};
四、压缩的 index.html 文件
构建代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>14- webpack 压缩 index 代码</title></head><body><script type="text/javascript" src="main.bundle.js"></script></body></html>
参考链接
网友评论