亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

el09xccxy / 1942人閱讀

摘要：以插件為例先安裝插件，在命令行中輸入執(zhí)行完之后，在的中就多了下面的代碼即安裝了插件在配置文件中讓插件生效，在對(duì)象中加入一個(gè)字段，這個(gè)字段接收一個(gè)數(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={}對(duì)象中加入一個(gè)plugins字段，這個(gè)字段接收一個(gè)數(shù)組，也就意味著，可以給webpack應(yīng)用很多各種各樣的插件

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

    new HtmlWebpackPlugin()//注意后面不要加分號(hào)，否則執(zhí)行會(huì)出錯(cuò)
]

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

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

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

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

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

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

更新：

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

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

? ?removeAttributeQuotes:true//刪除屬性雙引號(hào)

}

生成鏈接消除緩存：

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

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

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

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

看完整webpack配置文件代碼（下面的是生成多個(gè)頁(yè)面，引入不同的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頁(yè)面的名字為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的變化，所以也把兩個(gè)模板html中的代碼貼出來

one.html




<%= htmlWebpackPlugin.options.title %>



hello one



two.html




<%= htmlWebpackPlugin.options.title %>



hello two



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

插件：clean-webpack-plugin

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

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

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

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

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

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

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

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

相關(guān)文章

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

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

    rainyang 評(píng)論0 收藏0

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

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

    jokester 評(píng)論0 收藏0

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

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

    wmui 評(píng)論0 收藏0

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

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

    Zoom 評(píng)論0 收藏0

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

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

    王偉廷 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<