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

el09xccxy 發布于2019-08-23 18:00 / 1779人閱讀

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

以html-webpack-plugin插件為例

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

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

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

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

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

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

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

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

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

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

OK，就先寫這么多，持續更新中……

更新：

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

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

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

}

生成鏈接消除緩存：

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

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

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

想要在生成的不同的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"]
    })
]

}
因為涉及到title的變化，所以也把兩個模板html中的代碼貼出來

one.html


<%= htmlWebpackPlugin.options.title %>

hello one

two.html


<%= htmlWebpackPlugin.options.title %>

hello two

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

插件：clean-webpack-plugin

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

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

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

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

還有就是打字有點快，可能有的地方不小心打錯了，還請大家海涵，如果發現并提出來那就更好了，還有一種可能，就是打的都對（哈哈），不過也不介意提出別的關于技術的意見，什么都行滴，互相學習互相進步

作者：冰雪為融
來源：CSDN
原文：https://blog.csdn.net/lhjueji...
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

云服務器 GPU云服務器 php引入不同的頁面中引入的引入html頁面 html調整引入頁面

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104491.html

?使用webpack配置多頁面應用(MPA)

使用webpack配置MPA 為什么需要使用 webpack 構建多頁應用呢？因為某些項目使用 SPA 不太合適（大多是 SEO 的原因），或者您在做項目時有其他的需求。如果你有如下需求：使用 ES6 進行開發期望使用面向對象開發（class）自動壓縮合并 CSS 和 JS 文件使用 ESLint 進行代碼檢查自動生成 HTML 文件自動抽取 CSS 文件 ... 有了這些需求，...

rainyang 2019-08-23 14:23 評論0 收藏0
[js高手之路]深入淺出webpack教程系列6-插件使用之html-webpack-plugin配

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

jokester 2019-08-22 11:11 評論0 收藏0
我的WebPack入門（二）——html-webpack-plugin

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

wmui 2019-08-20 14:50 評論0 收藏0
Webpack 4 和單頁應用入門

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

Zoom 2019-08-21 11:23 評論0 收藏0
來,webpack擼一個多頁面應用腳手架!!!

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

王偉廷 2019-08-22 17:36 評論0 收藏0