plugin -- HtmlWebpackPlugin · 前端工程化学习笔记

>[success] # HtmlWebpackPlugin 1. `webpack`打包生成**css js 等文件**，但是打包后的`html`页面文件是没有，每次一都需要手动去写 `html `页面并且将打包好的文件引入到手的编写的 `html `中 2. `html-webpack-plugin` 这个插件会将你配置的模板页面，在打包的时候一并生成一个`html `页面，并且将**对应的css和js自动引入** 3. 安装 `npm install html-webpack-plugin -D` >[danger] ##### 两种模板使用方式 1. 如果没有自定义 `html` 模板，就会使用插件自己内部的默认模板，在`html-webpack-plugin`的源码中，有一个`default_index.ejs`模块，语法`<% 变量 %>`，这个是`EJS`模块填充数据的方式 ~~~html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> </body> </html> ~~~ * 配置中`title `可以写入 `htmlWebpackPlugin.options.title` ![](https://img.kancloud.cn/84/fa/84faa446120afb26d8e67d3eaf46a3a1_791x395.png) ![](https://img.kancloud.cn/74/36/74364e5eb623bc0233ef5688f5b12542_993x258.png) 2. 想自己自定义 `html` 模板，就需要使用`template`指定我们要使用的模块所在的路径 ~~~ const HtmlWebpackPlugin = require('html-webpack-plugin') module.export = { plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname,'src/search.html'), // 使用模板 filename: 'search.html', // 打包后的文件名 title: 'Webpack Plugin Sample', // 设置html标题 meta: { // 设置对象中的元数据标签 viewport: 'width=device-width' }, }), ] } ~~~ >[info] ## 4.x 说明说明如果你是`webpack4.x` 版本并且运行时候提示`Cannot read property 'tap' of undefined`,将`HtmlWebpackPlugin` 降级到`4.x`版本就好了