webpack中html-webpack-plugin插件的使用（生成多個html頁面，引入不一樣的js文件）

時間 2019-12-05

標籤 webpack html plugin 插件使用生成多個頁面引入不一樣文件欄目 HTML 简体版

原文原文鏈接

以html-webpack-plugin插件爲例javascript

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

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

二、在配置文件中讓插件生效，在module.exports={}對象中加入一個plugins字段，這個字段接收一個數組，也就意味着，能夠給webpack應用不少各類各樣的插件webpack

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

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

運行npm run dev 在dist中會自動生成一個index.html文件，而且這個html中自動引入了main.js（注意：這裏的dev和main.js都是咱們以前配置好的，根據你本身的設定能夠不一樣，若是，還有疑問，能夠看我以前寫過的文章
https://mp.csdn.net/postedit/...），代碼以下所示
<script type="text/javascript" src="main.js"></script>
若是咱們有本身的html文件，裏面已經有一些寫好的結構，想要在這個文件的基礎上加載打包後的main.js，咱們只須要在配置裏面指定一個參數（是一個對象），這個對象裏面能夠包含兩個屬性filename和templategithub

filename：指定當咱們打包好以後，新建的html文件的名字叫什麼，若是不寫的話，默認生成的是index.html
template：指定以哪一個html爲模板去建立
plugins:[web

new HtmlWebpackPlugin({
        filename:'first.html',//打包好後，新建的html名字爲first.html
        template:'./src/index.html'//以src下面的index.html爲模板去建立新的html文件
    })
]

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

OK，就先寫這麼多，持續更新中……數組

更新：緩存

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

collapseWhitespace:true,//壓縮空白

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

}

生成連接消除緩存：

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

在生成的html文件中加入本身的title：首先在插件配置文件中加入title:"名字"，而後必定要記得在模板的title中加入下面的代碼

<title><%= htmlWebpackPlugin.options.title %></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

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>

</head>
<body>
<div>hello one</div>
</body>
</html>
two.html

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title><%= htmlWebpackPlugin.options.title %></title>

</head>
<body>
<div>hello two</div>
</body>
</html>
嗯、是否是超級簡單，其實這些在webpack的官網上均可以找到，附上連接，有興趣的能夠看看哦，並且官網巨詳細滴
https://github.com/jantimon/h...
再稍微提一個，刪除文件的插件吧，這個很簡單，我就把步驟寫一下，不作詳細的擴展

插件：clean-webpack-plugin

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

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

三、使用：new CleanWebpackPlugin(['dist'])//表明刪除dist這個文件夾，固然也能夠是其餘的，很簡單就再也不說了

其實，插件嘛，只要一個會用了，其它的也就簡單了，因此也就再也不多提什麼了，若是我以爲有必要的話，還會再寫的

還有就是打字有點快，可能有的地方不當心打錯了，還請你們海涵，若是發現並提出來那就更好了，還有一種可能，就是打的都對（哈哈），不過也不介意提出別的關於技術的意見，什麼都行滴，互相學習互相進步

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

相關標籤/搜索

不使用插件