详解html-webpack-plugin插件(用法总结)

2024-05-06 15:30:10

字体：大中小

来源：转载

供稿：网友

html-webpack-plugin 插件是用于编译 Webpack 项目中的 html 类型的文件，如果直接将 html 文件置于 ./src 目录中，用 Webpack 打包时是不会编译到生产环境中的。因为 Webpack 编译任何文件都需要基于配置文件先行配置的。

Webpack 插件使用三步曲：安装>引入>配置

npm 安装

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

yarn 安装

yarn add html-webpack-plugin --dev

html-webpack-plugin 入口未定义时

//webpack.config.js const path = require('path');const htmlWebpackPlugin = require('html-webpack-plugin');module.exports = {  entry: {    home: path.resolve(__dirname, './src/app.js')  },  output: {    path: path.resolve(__dirname, 'dist'),    filename: '[name].js'  },  plugins: [    new htmlWebpackPlugin()  ]}

输出的 html 文件为：dist/index.html

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title>Webpack App</title> </head> <body> <script type="text/javascript" src="home.js"></script></body></html>

此 webpack.config.js 配置文件，是最简用法 html-webpack-plugin 甚至未传递任何参数，但它基于这个原则 Entrypoint undefined = index.html 当未定义此插件的入口时，默认为 index.html,输出同样是 index.html。
所以未定义入口时，不论 ./src 下有任何名称的 html 文件都不会被打包处理，但是会默认输出 index.html 文件。

html-webpack-plugin 中任何自定义参数设置都会覆盖默认值

简单定义一个入口（在参数对象的 template 字段中设置）看看效果：

./src/index.html 中有这个文件

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Document</title></head><body>  <div id="test">html webpack plugin</div></body></html>

webpack.config.js 增加 template 字段

const path = require('path');const htmlWebpackPlugin = require('html-webpack-plugin');module.exports = {  entry: {    home: path.resolve(__dirname, './src/app.js')  },  output: {    path: path.resolve(__dirname, 'dist'),    filename: '[name].js'  },  plugins: [    new htmlWebpackPlugin({      template: './src/index.html'//只增加了这行    })  ]}

打包结果是 dist/home.js 和 dist/index.html 其中 html　文件内容如下，和之前src文件中创建的完全一样，证明自定义入口生效，且覆盖了默认入口

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Document</title></head><body>  <div id="test">html webpack plugin</div></body></html>

上一篇：详解JavaScript中操作符和表达式

下一篇：JS 数组随机洗牌的实例代码