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>
新聞熱點
疑難解答
圖片精選
