html-webpack-plugin插件【用法總結】

時間 2019-12-06

標籤 html webpack plugin 插件用法總結欄目 HTML 简体版

原文原文鏈接

html-webpack-plugin 插件是用於編譯 Webpack 項目中的 html 類型的文件，若是直接將 html 文件置於 ./src 目錄中，用 Webpack 打包時是不會編譯到生產環境中的。由於 Webpack 編譯任何文件都須要基於配置文件先行配置的。javascript

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

npm 安裝java

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

yarn 安裝webpack

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.htmlweb

<!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 文件。npm

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文件中建立的徹底同樣，證實自定義入口生效，且覆蓋了默認入口bash

<!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>

template: './src/index2.html' 這裏，template 的值就是 html 文件的入口，
至關於js文件的 entry 字段的做用，只設置 template時，默認輸出爲 index.html, 輸出文件名經過 `filename` 字段設置

template指定你生成的文件所依賴哪個html文件模板，模板類型能夠是html、jade、ejs等。可是要注意的是，若是想使用自定義的模板文件的時候，你須要安裝對應的loader。app

當配置了 html 文件的出口 filename 時

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/index2.html',
            filename: 'index.output.html'
        })
    ]
}

輸出爲 dist/home.js 和 dist/index.output.html

同 webpack.config.js 配置文件的 output 屬性的 filename 字段同樣，htmlWebpackPlugin({})的filname 字段也能夠在其值加文件夾實現分類

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/index2.html',
            filename: './category/index.output.html'
        })
    ]
}

輸出爲 dist/home.js 和 dist/category/index.output.html

title 字段，只有未定義 template 模板文件的時候生效，即只在使用默認輸出文件index.html 的時候，title 設置纔有用，不然它的值，會被你指定的 template 文件的title所覆蓋，title　默認值爲　Webpack App

favicon

'./somepath/favicon.ico',它的值是你的 favicon.ico 圖標的路徑

inject的四個值： true body head false 指定在何處（body or head）引入 script 文件

true 默認值，script標籤位於html文件的 body 底部
body script標籤位於html文件的 body 底部
head script標籤位於html文件的 head中
false 不插入生成的js文件，這個幾乎不會用到的
其中 body 和 head 爲字符串類型須要加引號，false和true爲 Boolean 類型值

minify 的值是一個對象，設置壓縮屬性

plugins: [

new HtmlWebpackPlugin({
    ...
    minify: {
        removeAttributeQuotes: true // 移除屬性的引號
    }
})

]

hash：布爾值，用於清除緩存

cache: 布爾值, 指定文件要不要緩存

showErrors：布爾值，將錯誤信息寫入HTML頁面

meta： {} 值是對象，設置元信息

meta：{viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}

xhtml

一個布爾值，默認值是 false ，若是爲 true ,則以兼容 xhtml 的模式引用文件。

chunks

chunks主要用於多入口文件，當你有多個入口文件，那就回編譯後生成多個打包後的文件，那麼chunks 就能選擇你要使用那些js文件

entry: {
    index: path.resolve(__dirname, './src/index.js'),
    devor: path.resolve(__dirname, './src/devor.js'),
    main: path.resolve(__dirname, './src/main.js')
}

plugins: [
    new httpWebpackPlugin({
        chunks: ['index','main']
    })
]

那麼編譯後：

<script type=text/javascript src="index.js"></script>
<script type=text/javascript src="main.js"></script>

若是你沒有設置 chunks 選項，那麼默認html 文件會引入全部的 entry 裏面的js文件

excludeChunks 和 Chunks做用是同樣的，值也都是數組形式，對多入口js進行選擇
排除掉一些js

excludeChunks: ['devor.js']
// 等價於上面的

xhtml

一個布爾值，默認值是 false ，若是爲 true ,則以兼容 xhtml 的模式引用文件。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。