[js高手之路]深入淺出webpack教程系列4-插件使用之html-webpack-plugin配

qpal 發(fā)布于2019-08-22 11:08 / 2293人閱讀

摘要：還記得我們上文中的文件嗎那里面的標(biāo)簽還是寫死的文件，那么怎么把他們變成動(dòng)態(tài)的文件，這個(gè)動(dòng)態(tài)生成的文件會(huì)動(dòng)態(tài)引入我們打包后生成的文件呢，我們可以使用插件，首先安裝這個(gè)插件，好的，接下來(lái)就開始用這個(gè)插件了官方參考文檔插件通用用法

還記得我們上文中的index.html文件嗎? 那里面的script標(biāo)簽還是寫死的index.bundle.js文件，那么怎么把他們變成動(dòng)態(tài)的index.html文件，這個(gè)動(dòng)態(tài)生成的index.html文件會(huì)動(dòng)態(tài)引入我們打包后生成的js文件呢？，我們可以使用插件html-webpack-plugin，首先安裝這個(gè)插件npm install html-webpack-plugin --save-dev，好的，接下來(lái)就開始用這個(gè)插件了

官方參考文檔：

插件通用用法：https://webpack.js.org/config...

html-webpack-plugin插件用法：https://webpack.js.org/plugin...

html-webpack-plugin插件配置：https://github.com/jantimon/h...

一、首先，我們需要在配置文件webpack.dev.config.js中，引入插件

var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry : {
        main : "./src/js/main.js",
        calc : "./src/js/calc.js"
    },
    output : {
        //__dirname，就是當(dāng)前webpack.config.js文件所在的絕對(duì)路徑
        path : __dirname + "/dist", //輸出路徑，要用絕對(duì)路徑
        filename : "[name]-[hash].bundle.js" //打包之后輸出的文件名
    },
    plugins: [new HtmlWebpackPlugin()]
};

然后執(zhí)行npm run d打包命令，就能在dist目錄下動(dòng)態(tài)生成index.html文件，而且引入了2個(gè)動(dòng)態(tài)打包生成的js文件，這個(gè)時(shí)候刷新index.html文件，就能看到j(luò)s函數(shù)執(zhí)行的結(jié)果了

二、但是，這個(gè)在dist目錄下面新生成的html文件，跟我們的項(xiàng)目目錄(demo2)下面的index.html文件并沒有任何關(guān)聯(lián)，顯然不符合實(shí)際的項(xiàng)目需求，那我們想要的結(jié)果應(yīng)該是根據(jù)demo2下面的index.html這個(gè)文件，為模板生成dist目錄下面的index.html文件，這樣就把兩個(gè)文件建立起了關(guān)聯(lián)，我們只需要在配置文件webpack.dev.config.js中，給html-webpack-plugin的構(gòu)造函數(shù)傳入template模板即可

 var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry : {
        main : "./src/js/main.js",
        calc : "./src/js/calc.js"
    },
    output : {
        //__dirname，就是當(dāng)前webpack.config.js文件所在的絕對(duì)路徑
        path : __dirname + "/dist", //輸出路徑，要用絕對(duì)路徑
        filename : "[name]-[hash].bundle.js" //打包之后輸出的文件名
    },
    plugins: [new HtmlWebpackPlugin(
        {
            template : "./index.html"
        }
    )]
};

template:就是以demo目錄下的這個(gè)index.html文件為模板生成dist/index.html文件，然后執(zhí)行npm run d打包命令就能重新生成了

三、但是還有個(gè)小問題，我們上面打包生成的index.html文件和js文件是在同一個(gè)目錄，在大型項(xiàng)目里面管理肯定很混亂，我們希望生成的.html文件和js文件分開存放，我們可以在webpack.dev.config.js文件中的filename配置中，加一個(gè)目錄js（js文件放在這個(gè)目錄下面），把他們分開就可以了，配置完了，不要忘記執(zhí)行打包命令(npm run d)

var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry : {
        main : "./src/js/main.js",
        calc : "./src/js/calc.js"
    },
    output : {
        //__dirname，就是當(dāng)前webpack.config.js文件所在的絕對(duì)路徑
        path : __dirname + "/dist", //輸出路徑，要用絕對(duì)路徑
        filename : "js/[name]-[hash].bundle.js" //打包之后輸出的文件名
    },
    plugins: [new HtmlWebpackPlugin(
        {
            template : "./index.html"
        }
    )]
};

四、插件的配置選項(xiàng)：inject與filename
webpack.dev.config.js配置文件:



var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry : {
        main : "./src/js/main.js",
        calc : "./src/js/calc.js"
    },
    output : {
        //__dirname，就是當(dāng)前webpack.config.js文件所在的絕對(duì)路徑
        path : __dirname + "/dist", //輸出路徑，要用絕對(duì)路徑
        filename : "js/[name]-[hash].bundle.js" //打包之后輸出的文件名
    },
    plugins: [new HtmlWebpackPlugin(
        {
            template : "./index.html",
            filename : "index-[hash].html",
            inject : "head"
        }
    )]
};

filename：打包生成的文件名，還可以加目錄，默認(rèn)沒有寫的時(shí)候是index.html

inject：有4個(gè)值: true | "head" | "body" | false

如果設(shè)置為head, 就是把js引入放在head標(biāo)簽里面, 如果設(shè)置為body，就是把js引入放在body里面， false: 不會(huì)引入js文件 true:引入js文件

五、插件的選項(xiàng)：title

title: 模板的標(biāo)題

webpack.dev.config.js配置文件代碼:

var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    entry : {
        main : "./src/js/main.js",
        calc : "./src/js/calc.js"
    },
    output : {
        //__dirname，就是當(dāng)前webpack.config.js文件所在的絕對(duì)路徑
        path : __dirname + "/dist", //輸出路徑，要用絕對(duì)路徑
        filename : "js/[name]-[hash].bundle.js" //打包之后輸出的文件名
    },
    plugins: [
        new HtmlWebpackPlugin({
            template : "./index.html",
            title : "ghostwu教你學(xué)webpack",
            inject : true
        })
    ]
};

然后，在demo2目錄下面的index.html文件中用ejs模板語(yǔ)法引入title

    


    
    
    
    <%= htmlWebpackPlugin.options.title %>

注意是：htmlWebpackPlugin.options.title，不要把html的h大寫，千萬(wàn)注意，我在這里踩了好久的坑

GPU云服務(wù)器云服務(wù)器 spark實(shí)戰(zhàn)高手之路深入淺出webpack 系列之深入理解系列

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91834.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

qpal

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 2959·2023-04-26 02:22
Java的環(huán)境搭建

閱讀 2309·2021-11-17 09:33
高防主機(jī)是什么-什么是高防服務(wù)器？

閱讀 3177·2021-09-22 16:06
服務(wù)器怎么做虛擬主機(jī)-我想在服務(wù)器建立虛擬主機(jī)，該怎么做？

閱讀 1107·2021-09-22 15:54
面試記錄2

閱讀 3555·2019-08-29 13:44
css邊框與背景

閱讀 1950·2019-08-29 12:37
大規(guī)模應(yīng)用TypeScript「2019 JSConf -Brie Bunge」

閱讀 1342·2019-08-26 14:04
【build your own xxx】實(shí)現(xiàn)你自己的call和apply

閱讀 1940·2019-08-26 11:57

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

[js高手之路]深入淺出webpack教程系列4-插件使用之html-webpack-plugin配

相關(guān)文章

**[js高手之路]深入淺出webpack教程系列5-插件使用之html-webpack-plugin配**

**[js高手之路]深入淺出webpack教程系列6-插件使用之html-webpack-plugin配**

**[js高手之路]深入淺出webpack教程系列2-配置文件webpack.config.js詳解(上**

**[js高手之路]深入淺出webpack教程系列3-配置文件webpack.config.js詳解(下**

**[js高手之路]深入淺出webpack教程系列1-安裝與基本打包用法和命令參數(shù)**

發(fā)表評(píng)論

0條評(píng)論

qpal

男|高級(jí)講師

TA的文章

tensorflow

Java的環(huán)境搭建

高防主機(jī)是什么-什么是高防服務(wù)器？

服務(wù)器怎么做虛擬主機(jī)-我想在服務(wù)器建立虛擬主機(jī)，該怎么做？

面試記錄2

css邊框與背景

大規(guī)模應(yīng)用TypeScript「2019 JSConf -Brie Bunge」

【build your own xxx】實(shí)現(xiàn)你自己的call和apply

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

[js高手之路]深入淺出webpack教程系列4-插件使用之html-webpack-plugin配

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！