使用html-webpack-plugin对HTML文件进行预处理-编程知识

原文地址：https://segmentfault.com/a/1190000021518323
作者：Fw恶龙
本文首发于：思否

一、前言

先整理一波之前和webpack相关的文章:

使用Webpack对CSS文件进行后处理
基于Webpack的CSS Sprites实现方案
Stylus系列——webpack-spritesmith配合stylus使用示例

继以上第三篇文章后很大程度上提高了CSS的开发效率，但是仍存在以下遗留问题：

在开发一个有多页面的项目时，CSS文件部分需要复用，部分需要各自页面引用，之前是直接打包至一个文件，目前需要修改下webpack的路径配置；
在CSS中引用的图片可以进行添加版本号、转base64等处理，而HTML中引用的CSS仍需要手动添加版本号，而且img标签的图片无法通过一系列处理；
每次开发完毕都需要人工去压缩处理图片，过程繁琐浪费时间；

为了降低和之前文章的耦合度，还有部分更新内容，故重新进行配置，和本文相关的内容会进行注释，其他配置的相关内容可以参考以上文章。

二、项目配置

1. 目录结构预览

+ node_modules      // npm install 生成
+ src               // 开发目录(自行创建)- index.ejs             // 用于生成index.html的模板文件+ css- sprite.styl       // webpack-spritesmith生成- index.styl- function.styl     // styl个人常用函数+ images- sprite.png        // webpack-spritesmith生成+ sprite            // 雪碧图放置文件夹..png..png+ js+ index.js
+ dist              // 代码产出目录– index.html    // html-webpack-plugin生成+ css- index.css+ images- icon.png+ js- index.js+ otherindex.js
– package.json      // npm init 生成
– package-lock.json // npm install 生成
- postcss.config.js // 自行创建
– webpack.config.js // 自行创建

2. 初始化项目

npm init

3. package.json

{"name": "cwwebpack","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "webpack --mode development"},"author": "","license": "ISC","devDependencies": {"autoprefixer": "^9.1.2","clean-webpack-plugin": "^1.0.0","css-loader": "^1.0.0","cssnano": "^4.0.5","file-loader": "^1.1.11","html-webpack-plugin": "^3.2.0","image-webpack-loader": "^6.0.0","postcss-loader": "^3.0.0","postcss-sorting": "^4.0.1","stylus": "^0.54.5","url-loader": "^1.1.1","webpack": "^4.17.0","webpack-cli": "^3.1.2","webpack-spritesmith": "^0.5.4"},"dependencies": {"mini-css-extract-plugin": "^0.4.1","stylus-loader": "^3.0.2"},"browserslist": ["> 1%","last 2 versions","not ie <= 8","ios >= 8","android >= 4.0"]
}

4. 安装相关modules

npm install

5. webpack.config.js

var path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const SpritesmithPlugin = require('webpack-spritesmith');
const HtmlWebpackPlugin = require('html-webpack-plugin');var templateFunctionStylSprite = function(data) {var sharedRem = '.ico\n    display: inline-block\n    background-image: url("I")\n    background-size: Dpx Hpx'.replace('I', data.sprites[0].image).replace('D', data.sprites[0].total_width).replace('H', data.sprites[0].total_height);var perSpriteRem = data.sprites.map(function(sprite) {return '.ico-N\n    width: Wpx\n    height: Hpx\n    background-position: Xpx Ypx'.replace('N', sprite.name.replace(/_/g, '-')).replace('W', sprite.width).replace('H', sprite.height).replace('X', sprite.offset_x).replace('Y', sprite.offset_y);}).join('\n');return sharedRem + '\n' + perSpriteRem;
};module.exports = {entry: {    // 入口文件，若有多个入口文件可以继续创建，用于解决前言中提到的第一点'index': __dirname + "/src/js/index.js"},output: {path: __dirname + "/dist", //打包后的文件存放的地方filename: "js/other/[name].js" //打包后输出文件的文件名},watch: true, //开启自动编译module: {rules: [{test: /\.styl$/,use: [{loader: MiniCssExtractPlugin.loader,options: {publicPath: "../"}}, {loader: "css-loader"}, {loader: "postcss-loader"}, {loader: "stylus-loader"}]},{test: /\.(png|svg|jp?g|gif)$/,use: [{loader: 'url-loader',options: {limit: 8192,name: 'images/[name].[ext]?v=[hash:8]'}}, {loader: 'image-webpack-loader',     // 图片压缩，用于解决前言中提到的第三点options: {mozjpeg: {progressive: true,quality: 90},// optipng.enabled: false will disable optipngoptipng: {enabled: true,},pngquant: {quality: [0.90, 1.00],speed: 4},gifsicle: {interlaced: false,}}}]}]},plugins: [new CleanWebpackPlugin(['dist/css', 'dist/images'],{root: __dirname,verbose: true,dry: true}),new SpritesmithPlugin({src: {cwd: path.resolve(__dirname, 'src/images/sprite'),glob: '*.png'},target: {image: path.resolve(__dirname, 'src/images/sprite.png'),css: [[path.resolve(__dirname, 'src/css/sprite.styl'), {format: 'function_based_template'}]]},customTemplates: {'function_based_template': templateFunctionStylSprite},apiOptions: {cssImageRef: '../images/sprite.png'},spritesmithOptions: {algorithm: 'binary-tree',padding: 2}}),new MiniCssExtractPlugin({filename: "css/[name].css?v=[hash:8]",chunkFilename: "[id].css"}),new HtmlWebpackPlugin({         // 打包html文件，用于解决前言中提到的第二点template:'./src/index.ejs', // 模板文件路径filename: 'index.html',     // 生成的文件名title: 'My App',            // 页面titlechunks: ['index'],          // 需要引入的入口文件，根据entry的入口文件进行配置，会将其生成的css和js插入到模板中inject: false,              // 不插入生成的js文件，只是单纯的生成一个html文件，由于个人开发需求，js不需要引入，需要单独开发minify:{                    //压缩HTML文件，常用属性如下removeComments: false,                  // 移除HTML中的注释collapseWhitespace: false,              // 删除空白符preserveLineBreaks: false,              // 删除换行removeStyleLinkTypeAttributes: true,    // type="text/css"从style和link标签中删除removeScriptTypeAttributes: true        // type="text/javascript"从script标签中删除}})],
};

6. postcss.config.js

module.exports = {plugins: [require('autoprefixer'),require('cssnano')({preset: 'default',}),require('postcss-sorting')({'properties-order': 'alphabetical'})]
}

7. src/js/index.js

import '../css/index.styl';

8. src/css/index.styl

@import "function.styl"
@import "sprite.styl"

9. src/index.ejs

关于为何使用ejs后缀名，可以参考以下关于html-webpack-plugin属性及其配置的说明。

<!DOCTYPE html>
<html lang="zh-CN"><head><% /* 根据webpack.config.js中的title设置标题 */ %><title><%= htmlWebpackPlugin.options.title %></title><% /* 由于个人需求，不需要插入js，只需要css */ %><% for (var css in htmlWebpackPlugin.files.css) { %><link href="<%=htmlWebpackPlugin.files.css[css] %>" rel="stylesheet"><% } %></head><body><% /* html中使用到的图片需以如下方式插入，才可进行图片的一系列处理 */ %><img src="<%=require('./images/home_bg.jpg')%>" alt="" style="width: 100px;"></body></html>