webpack中使用html-webpack-plugin生成HTML文件并主动插入css和js引入标签

Posted 2022-03-03 zheoneandonly

• html-webpack-plugin
• clean-webpack-plugin

 一、html-webpack-plugin

由于打包时生成的css样式文件和js脚本文件会采用hash值作为文件命名的一部分，每一次调试打包结果都需要手动修改名称，这种做法就违背了webpack的自动化打包的初衷，而且还有需求就是要对html文件进行优化压缩，也不能直接在源文件上进行操作，还有清除注释等一系列操作。

npm install html-webpack-plugin --save-dev

更详细的教程文档可以参考npm插件文档：https://www.npmjs.com/package/html-webpack-plugin

 1 var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
 2 module.exports = 
 3     plugins: [
 4         //生成html文件
 5         new HtmlWebpackPlugin(
 6             filename:‘index.html‘,//生成的文件名
 7             template:‘./index.html‘,//指定打包压缩的文件
 8             minify:
 9                 removeComments:true,//清除注释
10                 collapseWhitespace:true//清理空格
11             
12         )
13  

当然也可以同时处理多个html文件（通过chunks属性）：

1 plugins: [
2   new HtmlWebpackPlugin(
3     chunks: [‘app‘]
4   )
5 ]

 二、clean-webpack-plugin

clean-webpack-plugin插件是用来清理构建文件夹，将上一次构建的文件全部清除，这个插件很简单，只需要plugins中引入就可以，没有什么多余的配置，但是需要注意的是在创建变量的时候需要使用大括号将变量名包裹起来，不然有时会出现报错情况，原因尚不明确：

1 const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);
2 module.exports = 
3     plugins: [
4         new CleanWebpackPlugin()//清理构建文件夹
5     ]
6      

 

这边博客是基于上一篇博客的基础上测试的，所有测试代码与上一篇博客一致，只有配置文件增加了一些新的功能，下面贴上全部配置文件代码：

 1 var path = require("path");
 2 const glob = require(‘glob‘);
 3 const PurifyCSSPlugin = require(‘purifycss-webpack‘);
 4 var MiniCssExtractPlugin = require("mini-css-extract-plugin");
 5 var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
 6 const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);
 7 module.exports = 
 8     entry: 
 9         index: ‘./src/index.js‘,
10     ,
11     output: 
12         path: path.resolve(__dirname, "dist"),
13         filename: "[name]-[hash:5].js",
14         // publicPath:‘/dist‘
15     ,
16     module: 
17         rules: [
18             
19                 test: /\.less$/,
20                 use: [
21                     // loader:‘style-loader‘,
22                      loader: MiniCssExtractPlugin.loader ,
23                      loader: ‘css-loader‘ ,
24                     
25                         loader: ‘postcss-loader‘,
26                         options: 
27                             ident: ‘postcss‘,
28                             plugins: [
29                                 // require(‘autoprefixer‘)(),//添加前缀
30                                 require(‘postcss-cssnext‘)(),//添加前缀 转换css未来语法
31                                 require(‘cssnano‘)(
32                                     preset: ‘default‘
33                                 ), 
34                             ]
35                         
36                     ,
37                      loader: ‘less-loader‘ ],
38             
39         ]
40     ,
41     plugins: [
42         new MiniCssExtractPlugin(
43             // Options similar to the same options in webpackOptions.output
44             // both options are optional
45             filename: "[name]-[hash:5].css",
46             // chunkFilename: "[id].css"
47         ),
48         new HtmlWebpackPlugin(
49             filename:‘index.html‘,//生成的文件名
50             template:‘./index.html‘,//打包压缩的文件
51             minify:
52                 removeComments:true,//清除注释
53                 collapseWhitespace:true//清理空格
54             
55         ),
56         new CleanWebpackPlugin()
57         // new PurifyCSSPlugin(
58         //     paths:glob.sync(path.join(__dirname,‘../index.html‘))
59         // )
60     ]
61      

View Code