webpack中使用html-webpack-plugin生成HTML文件並主動插入css和js引入標籤

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

 1、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 ]

 2、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