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

資訊專欄INFORMATION COLUMN

webpack中html-webpack-plugin插件的使用（生成多個html頁面，引入不同的j

el09xccxy / 1794人閱讀

摘要：以插件為例先安裝插件，在命令行中輸入執(zhí)行完之后，在的中就多了下面的代碼即安裝了插件在配置文件中讓插件生效，在對象中加入一個字段，這個字段接收一個數(shù)組，也就意味著，可以給應(yīng)用很多各種各樣的插件先將插件引進(jìn)來由于插件可以攜

以html-webpack-plugin插件為例

1、先安裝插件，在命令行中輸入：npm? i -D html-webpack-plugin（執(zhí)行完之后，在package.js的devDependencies中就多了下面的代碼

"html-webpack-plugin": "^3.2.0"
即安裝了html-webpack-plugin插件
）

2、在配置文件中讓插件生效，在module.exports={}對象中加入一個plugins字段，這個字段接收一個數(shù)組，也就意味著，可以給webpack應(yīng)用很多各種各樣的插件

先將插件引進(jìn)來：
const HtmlWebpackPlugin = require("html-webpack-plugin");
由于插件可以攜帶參數(shù)/選項(xiàng)，你必須在 webpack 配置中，向 plugins 屬性傳入 new 實(shí)例。
plugins:[

    new HtmlWebpackPlugin()//注意后面不要加分號，否則執(zhí)行會出錯
]

運(yùn)行npm? run dev 在dist中會自動生成一個index.html文件，并且這個html中自動引入了main.js（注意：這里的dev和main.js都是我們之前配置好的，根據(jù)你自己的設(shè)定可以不同，如果，還有疑問，可以看我之前寫過的文章
https://mp.csdn.net/postedit/...），代碼如下所示

如果我們有自己的html文件，里面已經(jīng)有一些寫好的結(jié)構(gòu)，想要在這個文件的基礎(chǔ)上加載打包后的main.js，我們只需要在配置里面指定一個參數(shù)（是一個對象），這個對象里面可以包含兩個屬性filename和template

filename：指定當(dāng)我們打包好之后，新建的html文件的名字叫什么，如果不寫的話，默認(rèn)生成的是index.html
template：指定以哪個html為模板去創(chuàng)建
plugins:[

    new HtmlWebpackPlugin({
        filename:"first.html",//打包好后，新建的html名字為first.html
        template:"./src/index.html"http://以src下面的index.html為模板去創(chuàng)建新的html文件
    })
]

打包好之后，在dist文件中就會自動生成一個first.html文件，并且，這個html文件中包含了index.html中的結(jié)構(gòu)，并且，也會自動引入main.js文件

OK，就先寫這么多，持續(xù)更新中……

更新：

html壓縮輸出：在插件配置文件中加入：minify;{

? ?collapseWhitespace:true,//壓縮空白

? ?removeAttributeQuotes:true//刪除屬性雙引號

}

生成鏈接消除緩存：

? 在插件配置文件中加入hash(bool)：hash:true

在生成的html文件中加入自己的title：首先在插件配置文件中加入title:"名字"，然后一定要記得在模板的title中加入下面的代碼

<%= htmlWebpackPlugin.options.title %>
想要生成多個html頁面：filename，這個上面我們已經(jīng)說到過，filename可以指定生成html文件的名字，那么這也就可以用來區(qū)分我們要生成的html頁面，否則默認(rèn)情況下生成的都是index.html，那么自然也就無法生成多個頁面了，用法上面已經(jīng)講過了，就不再重復(fù)說了（注意，想要生成多個html頁面，就要調(diào)用多次插件）

想要在生成的不同的html頁面中引入不同的js文件，怎么做？很簡單，只要在插件配置文件中加入：chunks:["入口文件名"]，即可，如果不加的話，會在生成的html頁面中引入所有的入口文件哦

看完整webpack配置文件代碼（下面的是生成多個頁面，引入不同的js文件）

webpack.config.js中的代碼

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {

entry:{//入口文件
    one:"./src/index.js",
    two:"./src/main.js"
},
output:{//輸出的文件
    path:path.resolve(__dirname,"dist"),
    filename:"[name].boundle.js"
},
mode:"development",
plugins:[
    new HtmlWebpackPlugin({
        template:"./src/one.html",
        filename:"one.html",//生成的html頁面的名字為one.html
        title:"one",//它的title為one，記得要在src/one.html中加入<%= %>
        hash:true,
        chunks:["one"]
    }),
    new HtmlWebpackPlugin({
        template:"./src/two.html",
        filename:"two.html",
        title:"two",
        hash:true,
        chunks:["two"]
    })
]

}
因?yàn)樯婕暗絫itle的變化，所以也把兩個模板html中的代碼貼出來

one.html




<%= htmlWebpackPlugin.options.title %>



hello one



two.html




<%= htmlWebpackPlugin.options.title %>



hello two



嗯、是不是超級簡單，其實(shí)這些在webpack的官網(wǎng)上都可以找到，附上鏈接，有興趣的可以看看哦，而且官網(wǎng)巨詳細(xì)滴
https://github.com/jantimon/h...
再稍微提一個，刪除文件的插件吧，這個很簡單，我就把步驟寫一下，不做詳細(xì)的擴(kuò)展

插件：clean-webpack-plugin

1、下載：npm i -D clean-webpack-plugin

2、引入：在配置文件中引入，和上面的引入方式一樣;const CleanWebpackPlugin = require("clean-webpack-plugin")

3、使用：new CleanWebpackPlugin(["dist"])//代表刪除dist這個文件夾，當(dāng)然也可以是其他的，很簡單就不再說了

其實(shí)，插件嘛，只要一個會用了，其它的也就簡單了，所以也就不再多提什么了，如果我覺得有必要的話，還會再寫的

還有就是打字有點(diǎn)快，可能有的地方不小心打錯了，還請大家海涵，如果發(fā)現(xiàn)并提出來那就更好了，還有一種可能，就是打的都對（哈哈），不過也不介意提出別的關(guān)于技術(shù)的意見，什么都行滴，互相學(xué)習(xí)互相進(jìn)步

作者：冰雪為融
來源：CSDN
原文：https://blog.csdn.net/lhjueji...
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接！

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

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

相關(guān)文章

  • ?使用webpack配置多頁面應(yīng)用(MPA)

    使用webpack配置MPA 為什么需要使用 webpack 構(gòu)建多頁應(yīng)用呢？因?yàn)槟承╉?xiàng)目使用 SPA 不太合適（大多是 SEO 的原因），或者您在做項(xiàng)目時有其他的需求。如果你有如下需求： 使用 ES6 進(jìn)行開發(fā) 期望使用面向?qū)ο箝_發(fā)（class） 自動壓縮合并 CSS 和 JS 文件 使用 ESLint 進(jìn)行代碼檢查 自動生成 HTML 文件 自動抽取 CSS 文件 ... 有了這些需求，...

    rainyang 評論0 收藏0

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

    摘要：上文我們對的實(shí)例進(jìn)行了遍歷分析，講解了幾個常用屬性以及自定義屬性的添加，本文，我們繼續(xù)深入他的配置選項(xiàng)的探討一選項(xiàng)這個屬性非常有用，可以指定某個頁面加載哪些如文件我們可以用他做多個頁面模板的生成比如，我們在實(shí)際開發(fā)中，做一個博客網(wǎng)站，一 上文我們對html-webpack-plugin的實(shí)例htmlWebpackPlugin進(jìn)行了遍歷分析，講解了幾個常用屬性( inject, mini...

    jokester 評論0 收藏0

  • 我的WebPack入門（二）——html-webpack-plugin

    摘要：可以根據(jù)你設(shè)置的模板，在每次運(yùn)行后生成對應(yīng)的模板文件，同時所依賴的也都會被引入，如果中含有值，則生成的模板文件也會引入正確版本的文件。 上一節(jié)的入門中，只是跑通了一個很簡單的webpack項(xiàng)目的流程，對其中的參數(shù)以及實(shí)戰(zhàn)運(yùn)用中的一些用法并不太清楚，雖然目前工作項(xiàng)目中并沒有用起webpack，不過覺得還是需要再去摸索一番，以便可以更清楚的用起這個工具。 上一節(jié)最終運(yùn)行webpack命令，...

    wmui 評論0 收藏0

  • Webpack 4 和單頁應(yīng)用入門

    摘要：但由于和技術(shù)過于和復(fù)雜，并沒能得到廣泛的推廣。但是在瀏覽器內(nèi)并不適用。依托模塊化編程，的實(shí)現(xiàn)方式更為簡單清晰，一個網(wǎng)頁不再是傳統(tǒng)的類似文檔的頁面，而是一個完整的應(yīng)用程序。到了這里，我們的主角登場了年此處應(yīng)有掌聲。和差不多同期登場的還有。 Github：https://github.com/fenivana/w...webpack 更新到了 4.0，官網(wǎng)還沒有更新文檔。因此把教程更新一下...

    Zoom 評論0 收藏0

  • 來,webpack擼一個多頁面應(yīng)用腳手架!!!

    摘要：抽取文件插件引入入口配置多個實(shí)例使用正則匹配到每個頁面對應(yīng)文件夾下的文件并配置來進(jìn)行解析從而實(shí)現(xiàn)對插件實(shí)例引入方法總結(jié)一個簡易版的多頁面應(yīng)用腳手架就這樣搞定啦是不是很簡單地址喜歡的童鞋給個哈您的支持就是我最大的動動動力 使用 webpack 構(gòu)建多頁面應(yīng)用 前言 之前使用 vue2.x + webpack3.x 擼了一個 vue 單頁腳手架 vue 版 spa 腳手架 有興趣的同學(xué)可以...

    王偉廷 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<