webpack實踐（四）- html-webpack-plugin

本文轉載自查看原文 2019-12-21 16:17 995 webpack/ html-webpack-plugin/ webpack總結和分享

webpack系列博客中代碼均在github上：https://github.com/JEmbrace/webpack-practice

一.前言

　　在上一篇《webpack實踐（三）- html-webpack-plugin》文章中，我們簡單的使用了一下html-webpack-pluin這個插件：創建實例並傳入template選項，並且演示了插件生成一個新模板並將打包后的腳本自動引入到模板文件中和插件使用原有模板並將打包后的腳本自動引入到模板文件中這兩個功能。

　　那對於html-webpack-plugin這個插件來說，除了前面演示過的template配置項之外，它還有很多可配置的選項。

　　接下來我們就來研究一下html-webpack-plugin這個插件其他可選的配置項。

二.title

　　title配置項可用於生成html的標題，基本語法: title:{String}

　　webpack.config.js

// 第一步：引入
var htmlWepackPlugin = require('html-webpack-plugin')

var path = require('path');
module.exports = {
  mode: 'development',
  entry: {
    main: './index.js'
  },
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: 'index.bundle.js'
  },
  // 第二步：創建html-webpack-plugin的實例，配置到plugins選項中
  plugins:[
    new htmlWepackPlugin({
      // title配置項可用於生成html的標題
      title: 'webpack實踐（四）- html-webpack-plugin',
      template: './index.html'
    })
  ]
};

　　使用webpack打包后的結果文件dist/index.html

　　我們發現打包后的結果文件並沒有生成相應的title,那實際上要想模板文件正常顯示配置的title這里有兩種辦法：

　　第一種就是不使用我們自己編寫的index.html模板，即不配置template選項，讓html-webpack-plugin幫我們生成一個模板文件

　　我們將webpack.config.js中的template選項注釋掉

　　webpack.config.js

// 第一步：引入
var htmlWepackPlugin = require('html-webpack-plugin')

var path = require('path');
module.exports = {
  mode: 'development',
  entry: {
    main: './index.js'
  },
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: 'index.bundle.js'
  },
  // 第二步：創建html-webpack-plugin的實例，配置到plugins選項中
  plugins:[
    new htmlWepackPlugin({
      // title配置項可用於生成html的標題
      title: 'webpack實踐（四）- html-webpack-plugin',
      // template: './index.html'
    })
  ]
};

　　重新打包查看dist/index.html 結果：

　　可以看到title已經成功顯示。

　　那第二種就是當我們需要使用我們自己的模板，即有template配置選項的時候。那么這個時候我們就需要在模板中使用 <％= htmlWebpackPlugin.options.title％>這樣的語法去獲取title並且展示到模板中。

　　我們先將剛剛注釋的template放開

　　webpack.config.js

// 第一步：引入
var htmlWepackPlugin = require('html-webpack-plugin')

var path = require('path');
module.exports = {
  mode: 'development',
  entry: {
    main: './index.js'
  },
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: 'index.bundle.js'
  },
  // 第二步：創建html-webpack-plugin的實例，配置到plugins選項中
  plugins:[
    new htmlWepackPlugin({
      // title配置項可用於生成html的標題
      title: 'webpack實踐（四）- html-webpack-plugin',
      template: './index.html'
    })
  ]
};

　　然后在修改根目錄下我們的模板文件index.html

<html>
    <head>
        <meta charset="utf-8" />
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <h1>webpack實踐（四）- html-webpack-plugin</h1>
    </body>
</html>

　　打包查看dist/index.html結果文件

　　可以看到，這次使用了我們自己的模板，並且將title成功的應用到了打包后的結果模板中。

三.filename

　　filename表示的是我們最終打包后的模板文件名，基本語法： filename:{String}

　　前面的配置中，我們沒有指定filename，生成后的模板名都是index.html，也可知當該參數缺省時，生成的模板文件名默認為index.html。

　　接着，我們加入這個配置項

　　webpack.config.js

// 第一步：引入
var htmlWepackPlugin = require('html-webpack-plugin')

var path = require('path');
module.exports = {
  mode: 'development',
  entry: {
    main: './index.js'
  },
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: 'index.bundle.js'
  },
  // 第二步：創建html-webpack-plugin的實例，配置到plugins選項中
  plugins:[
    new htmlWepackPlugin({
      // title配置項可用於生成html的標題
      title: 'webpack實踐（四）- html-webpack-plugin',
      template: './index.html',
      filename: 'resultIndex.html'
    })
  ]
};

　　打包查看生成的目錄和文件

　　備注：本次的打包結果不會覆蓋上次的結果，因此為了看清楚本次結果，最好將上次打包后的dist目錄刪除。

　可以看到打包后的結果文件已經和fielname的配置一致。

　　那么filename的值還可以是一個路徑

　　webpack.config.js

// 第一步：引入
var htmlWepackPlugin = require('html-webpack-plugin')

var path = require('path');
module.exports = {
  mode: 'development',
  entry: {
    main: './index.js'
  },
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: 'index.bundle.js'
  },
  // 第二步：創建html-webpack-plugin的實例，配置到plugins選項中
  plugins:[
    new htmlWepackPlugin({
      // title配置項可用於生成html的標題
      title: 'webpack實踐（四）- html-webpack-plugin',
      template: './index.html',
      filename: 'template/resultIndex.html'
    })
  ]
};

　　打包后的結果

四.inject

　　inject配置項用於指定打包后的javascript資源引入位置，基本語法： inject:{Boolean|String}。其中Boolean有兩個值可配置：true和false；String類型也有兩個值可選：‘body’和‘head’。對於Boolean類型的true值和String類型的body值，會指定將打包后的javascript資源引入位置放到body元素的底部；而false指定模板不引入javascript資源；head則指定將資源引入位置放到head元素中。

　　那么接下來我們將inject的值分別配置為true、false、body和head這四個值。

1.inject:true

　　webpack.config.js

// 第一步：引入
var htmlWepackPlugin = require('html-webpack-plugin')

var path = require('path');
module.exports = {
  mode: 'development',
  entry: {
    main: './index.js'
  },
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: 'index.bundle.js'
  },
  // 第二步：創建html-webpack-plugin的實例，配置到plugins選項中
  plugins:[
    new htmlWepackPlugin({
      // title配置項可用於生成html的標題
      title: 'webpack實踐（四）- html-webpack-plugin',
      template: './index.html',
      filename: 'template/resultIndex.html',
      inject: true
    })
  ]
};

　　　　結果文件

　　　　dist/template/resultIndex.html

2.inject:false

　　webpack.config.js

// 第一步：引入
var htmlWepackPlugin = require('html-webpack-plugin')

var path = require('path');
module.exports = {
  mode: 'development',
  entry: {
    main: './index.js'
  },
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: 'index.bundle.js'
  },
  // 第二步：創建html-webpack-plugin的實例，配置到plugins選項中
  plugins:[
    new htmlWepackPlugin({
      // title配置項可用於生成html的標題
      title: 'webpack實踐（四）- html-webpack-plugin',
      template: './index.html',
      filename: 'template/resultIndex.html',
      inject: false
    })
  ]
};

　　結果文件

　　dist/template/resultIndex.html

3.inject:body

　　webpack.config.js

// 第一步：引入
var htmlWepackPlugin = require('html-webpack-plugin')

var path = require('path');
module.exports = {
  mode: 'development',
  entry: {
    main: './index.js'
  },
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: 'index.bundle.js'
  },
  // 第二步：創建html-webpack-plugin的實例，配置到plugins選項中
  plugins:[
    new htmlWepackPlugin({
      // title配置項可用於生成html的標題
      title: 'webpack實踐（四）- html-webpack-plugin',
      template: './index.html',
      filename: 'template/resultIndex.html',
      inject: 'body'
    })
  ]
};

　　結果文件

　　dist/template/resultIndex.html

4.inject:head

　　webpack.config.js

// 第一步：引入
var htmlWepackPlugin = require('html-webpack-plugin')

var path = require('path');
module.exports = {
  mode: 'development',
  entry: {
    main: './index.js'
  },
  output: {
    path: path.resolve(__dirname,'dist'),
    filename: 'index.bundle.js'
  },
  // 第二步：創建html-webpack-plugin的實例，配置到plugins選項中
  plugins:[
    new htmlWepackPlugin({
      // title配置項可用於生成html的標題
      title: 'webpack實踐（四）- html-webpack-plugin',
      template: './index.html',
      filename: 'template/resultIndex.html',
      inject: 'head'
    })
  ]
};

　　結果文件

　　dist/template/resultIndex.html

五.minify

　　minify的作用就是對打包后的html進行壓縮配置，基本語法為：minify:{Boolean|Object}

　　minify的默認值為Boolean類型的false值，表示不對html結果進行壓縮；

　　對於Object類型的，minify也有很多可選的配置項。

1.caseSensitive

　　是否以區分大小寫的方式處理自定義HTML標簽的屬性，默認值為fasle，表示不區分大小寫（不區分大小寫即源文件中的包含大小寫的屬性會被轉化為小寫）。

　　設置minify.caseSensitive為fasle

　　　　webpack.config.js

　　　源文件和打包后的結果文件對比

　　　　可以看到，當minify設置為false的時候，不管是自定義標簽的屬性，還是HTML原有的標簽屬性，都會全部轉化為小寫（這里的結果和官方文檔的說法有些出入）

　　設置minify.caseSensitive為true

　　　　webpack.config.js

　　　　源文件和打包后的結果文件對比

　　　　minify設置為true即表示區分大小寫，因此可看到源文件中大寫的屬性在結果文件中保持不變。

2.minifyCSS

　　minifyCSS表示是否壓縮html中的樣式，其中樣式包括style標簽內部的樣式和寫在元素上的樣式。其默認值為false，表示不對這些樣式做額外處理，這里不演示值為false的配置。

　　webpack.config.js

　　源文件和打包后的結果文件對比

3.minifyJS

　　壓縮html中的JavaScript代碼。

　　webpack.config.js

　　源模板文件

<html>
    <head>
        <meta charset="utf-8" />
        <title><%= htmlWebpackPlugin.options.title %></title>
    </head>
    <body>
        <h1>webpack實踐（四）- html-webpack-plugin</h1>
        <script type="text/javascript">
            var h1Ele = document.getElementsByTagName('h1')[0];
            var innerHTML = h1Ele.innerHTML;
            console.log(innerHTML);
        </script>
    </body>
</html>

　　打包后的模板文件

<html>
    <head>
        <meta charset="utf-8">
        <title>webpack實踐（四）- html-webpack-plugin</title>
    <script type="text/javascript" src="../index.bundle.js"></script></head>
    <body>
        <h1>webpack實踐（四）- html-webpack-plugin</h1>
        <script type="text/javascript">var h1Ele=document.getElementsByTagName("h1")[0],innerHTML=h1Ele.innerHTML;console.log(innerHTML)</script>
    </body>
</html>

　　可以看到minifyJS對JavaScript代碼不僅進行了空格、換行和最后一行代碼分號的進行了刪除，同時在變量的定義也和源代碼有些差異。

4.removeComments

　　這個從字面意思就能看出來是刪除HTML模板中的注釋代碼，默認值為false，表示不刪除注釋。

　　而且當該項配置設置為true時，僅刪除html代碼中的注釋，不刪除style和javascript代碼片段中的注釋。

　　webpack.config.js

　 源文件

<html>
    <head>
        <meta charset="utf-8" />
        <title><%= htmlWebpackPlugin.options.title %></title>
        <style>
            /* 寫點樣式 */
            h1{
                font-size: 12px;
                color: #ccc;
            }
        </style>
    </head>
    <body>
        <!-- 這里是h1標簽 -->
        <h1>webpack實踐（四）- html-webpack-plugin</h1>
        <script type="text/javascript">
            // 獲取h1元素，並打印h1元素的innerHTML
            var h1Ele = document.getElementsByTagName('h1')[0];
            var innerHTML = h1Ele.innerHTML;
            console.log(innerHTML);
        </script>
    </body>
</html>

　　打包后的結果文件

<html>
    <head>
        <meta charset="utf-8">
        <title>webpack實踐（四）- html-webpack-plugin</title>
        <style>
            /* 寫點樣式 */
            h1{
                font-size: 12px;
                color: #ccc;
            }
        </style>
    <script type="text/javascript" src="../index.bundle.js"></script></head>
    <body>
        
        <h1>webpack實踐（四）- html-webpack-plugin</h1>
        <script type="text/javascript">
            // 獲取h1元素，並打印h1元素的innerHTML
            var h1Ele = document.getElementsByTagName('h1')[0];
            var innerHTML = h1Ele.innerHTML;
            console.log(innerHTML);
        </script>
    </body>
</html>

　　從源文件中可以看到，我們給html代碼中、style和javascript代碼中均添加了注釋，而打包后的結果文件中只有html中的注釋被移除。

六.總結

　　本篇文章總結了html-webpack-plugins插件中常用的一些可選配置項，分別為：title、filename、inject和minify。

　　而實際上還有一些常見的可選配置項沒有列出來，后續若能在實際需求中用到，在繼續補充。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 html-webpack-plugin html-webpack-plugin webpack之html-webpack-plugin html-webpack-plugin詳解（3）html-webpack-plugin的作用 html-webpack-plugin詳解 html-webpack-plugin詳解 html-webpack-plugin詳解 html-webpack-plugin的使用 html-webpack-plugin詳解