webpack最常用的插件：HtmlWebpackPlugin

天介紹 webpack 的一個最常用的插件：HTML Webpack Plugin。

說它是使用 webpack 開發前端項目必不可少的插件也不為過，因為它可以自動幫我們將 webpack 打包生成的文件（比如 js 文件、css 文件）嵌入到 html 文件中。

這在生成的文件帶有哈希串時尤為有用。

在 webpack 配置文件引入 HtmlWebpackPlugin 插件，然后在 plugins 數組中通過 new HtmlWebpackPlugin() 加入 HtmlWebpackPlugin 實例對象即可。

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'app.[contenthash:8].js',
  },
  mode: 'production',
  plugins: [
    new HtmlWebpackPlugin()
  ],
}

我們執行 npx webpack 命令后，webpack 額外給我們生成了一個 dist/index.html 文件。該 html 文件格式化后得到的內容為：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Webpack App</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script defer="defer" src="app.c8b961ec13a790ae7d15.js"></script>
</head>
<body></body>
</html>

可以看到將打包好的 app.js 文件被自動嵌入到 head 元素下最后一個子元素位置。

這里打包文件名尾部被添加了內容哈希串，這意味著每次項目的內容發生變化，哈希串的值都不同。

試想下，如果你自己管理 html 文件，每次都要改這個 js 文件名，是要多累，還好有 HtmlWebpackPlugin 幫忙。

當然前面這種只是 HtmlWebpackPlugin 插件的默認用法，我們可以做更具體的定制化。

一些常用的屬性

我們需要傳入一個配置對象來進行模板渲染定制化。

HtmlWebpackPlugin 的配置非常豐富，不過常用的就幾個。

plugins: [
  new HtmlWebpackPlugin({
    title: '前端西瓜哥的博客',
    favicon: 'static/favicon.ico',
  }),
],

titile：設置網頁標題；
filename：生成 html 文件名，默認值為 index/html；
template：使用自己的模板，這里填這個模板的路徑，使用了之后一些配置項就無效了，比如 title；
favicon：指定網站圖標路徑，除了會在 html 上填充 favicon 相關內容，還會將該文件拷貝到打包文件夾下，非常好用；
minify：是否壓縮 html 文件。不設置時，如果 webpack 的 mode 為 production，就會壓縮 html，移除多余的空格和注釋之類的。

使用自定義 html 模板

在實際開發中，通常是創建一個 index.html 提供給 HtmlWebpackPlugin 插件作為模板。

這樣的話，title 等配置和一些更細碎的內容就可以直接寫到 html 上。相比配置，直接在 html 上編輯要更直觀些。

我們在根目錄創建一個 index.html 作為模板：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>前端西瓜哥</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body></body>
</html>

這樣就可以直接在 html 模板上添加 title，以及一些 cdn 形式的第三方庫。

webpack.config.js 配置改為：

plugins: [
  new HtmlWebpackPlugin({
    template: 'index.html'
  }),
],

生成的 html 為：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>前端西瓜哥</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script defer src="app.d02c9155f73c92f51bf5.js"></script>
</head>
<body></body>
</html>

第三方庫建議使用自己本地項目的，會更穩定和安全些，比如上面就建議改為 <script src="static/jquery-3.6.0.min.js"></script>。

這里會用到一個 copy-webpack-plugin 插件將一些文件或文件夾拷貝到打包目錄下。關于這個插件我會另外專門寫一篇文章講解，這里不展開。

自定義 html 注入變量

webpack 支持通過使用 lodash.template() 的方式注入變量。

我們將模板 html 改為下面這樣：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
  <%= htmlWebpackPlugin.options.saySomething %>
</body>
</html>

配置改為：

plugins: [
  new HtmlWebpackPlugin({
    template: 'index.html',
    title: '前端西瓜哥的博客',
    // 下面這個是自定義屬性
    saySomething: 'Stay hungry, stay foolish'
  }),
],

將傳入給 HtmlWebpackPlugin 的配置屬性會成為 htmlWebpackPlugin.options 對象下的屬性，嵌入到模板 html 下。

所以這里的生成結果是：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>前端西瓜哥的博客</title>
<script defer src="app.d02c9155f73c92f51bf5.js"></script></head>
<body>
  Stay hungry, stay foolish
</body>
</html>

因為使用了 lodash.template 模板渲染豐富，除了可以嵌入變量的值，還支持判斷條件、循環等特性，基本上可以滿足我們的絕大多數場景。

結尾

HTML Webpack Plugin 是被廣泛使用的 webpack 插件，用來將我們打包出來的文件自動嵌入到一個模板 HTML 中。

實際開發中，通常我們會使用自己編寫的 html 模板。

我是前端西瓜哥，熱衷于分享前端知識，歡迎關注我。

TOC

1.認識webpack

webpack是一個現代的JavaScript應用的靜態模塊打包工具
1.模塊化
在ES6之前，我們要想進行模塊化開發，就必須借助于其他的工具，讓我們可以進行模塊化開發。
并且在通過模塊化開發完成了項目后，還需要處理模塊間的各種依賴，并且將其進行整合打包。而webpack其中一個核心就是讓我們可能進行模塊化開發，并且會幫助我們處理模塊間的依賴關系。
而且不僅僅是JavaScript文件，我們的CSS、圖片、json文件等等在webpack中都可以被當做

2.打包
將webpack中的各種資源模塊進行打包合并成一個或多個包(Bundle)。
并且在打包的過程中，還可以對資源進行處理，比如壓縮圖片，將scss轉成css，將ES6語法轉成ES5語法，將TypeScript轉成JavaScript等等操作。

3.和grunt/gulp的對比
如果你的工程模塊依賴非常簡單，甚至是沒有用到模塊化的概念。
只需要進行簡單的合并、壓縮，就使用grunt/gulp即可。
但是如果整個項目使用了模塊化管理，而且相互依賴非常強，我們就可以使用更加強大的webpack

在這里插入圖片描述

2.webpack的安裝

安裝node.js（https://nodejs.org/zh-cn/）
查看node版本 node -v
全局安裝webpack npm install webpack@3.6.0 -g，指定了版本為3.6.0
局部安裝webpack cd 對應目錄；npm install webpack@3.6.0 --save-dev
其中--save-dev是開發時依賴，項目打包后不需要繼續使用
為什么全局安裝后，還需要局部安裝呢？
在終端直接執行webpack命令，使用的全局安裝的webpack
當在package.json中定義了scripts時，其中包含了webpack命令，那么使用的是局部webpack

3.webpack的起步

在這里插入圖片描述

文件和文件夾解析：
dist文件夾：用于存放之后打包的文件
src文件夾：用于存放我們寫的源文件
main.js：項目的入口文件。
mathUtils.js：定義了一些數學工具函數，可以在其他地方引用，并且使用。
info.js：定義了一些變量信息

index.html：瀏覽器打開展示的首頁html
package.json：通過npm init生成的，npm包管理的文件

mathUtils.js function add(num1,num2){ return num1 + num2; } function mul(num1,num2){ return num1*num2; } module.exports = { add, mul }
info.js javascript<br />export const name = 'why';<br />export const height = 180;<br />
main.js const {add,mul} = require('./mathUtils.js'); console.log(add(20,30)); console.log(mul(20,30)); import {name,height} from './info.js'; console.log(name); console.log(height); 注：可以看到main.js引入了其它js文件
webpack打包 webpack ./src/main.js ./dist/bundle.js
打包后會在dist文件下，生成一個bundle.js文件
bundle.js文件，是webpack處理了項目直接文件依賴后生成的一個js文件，我們只需要將這個js文件在index.html中引入即可
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="dist/bundle.js"></script> </body> </html>

4.webpack的配置

目標：簡化上面的打包命令
1.創建webpack.config.js文件 const path = require('path') module.exports = { entry : "./src/main.js", output: { path: path.resolve(__dirname,'dist'), //動態獲取絕對路徑,__dirname是node中全局變量 filename : "bundle.js" }, }
2.npm init，生成package.json文件，這里面是針對當前項目的主要描述文件（里面會生成所有安裝的依賴）

在這里插入圖片描述

3.局部安裝webpack----cd 當前目錄；npm install webpack@3.6.0 --save-dev，生成node模塊

在這里插入圖片描述

4.配置package.json文件，簡化命令

在這里插入圖片描述

5.命令npm run build

5.loader的使用

在開發中我們不僅僅有基本的js代碼處理，我們也需要加載css、圖片，也包括一些高級的將ES6轉成ES5代碼，將TypeScript轉成ES5代碼，將scss、less轉成css，將.jsx、.vue文件轉成js文件等等
對于webpack本身的能力來說，對于這些轉化是不支持的。需要webpack擴展對應的loader
loader使用過程：
步驟一：通過npm安裝需要使用的loader
步驟二：在webpack.config.js中的modules關鍵字下進行配置

5.1 css的loader使用

1.創建css文件

在這里插入圖片描述

css<br />body {<br /> background-color:red; <br />}<br />

2.main.js引用 //1.使用commonjs的模塊化規范 const {add,mul} = require('./js/mathUtils.js'); console.log(add(20,30)); console.log(mul(20,30)); //2.使用ES6的模塊化規范 import {name,height} from './js/info.js'; console.log(name); console.log(height); //3.依賴css文件 require("./css/normal.css")
3.run build打包（報錯）

在這里插入圖片描述

4.https://v4.webpack.docschina.org/loaders/，配置cssloader文檔
5.npm install --save-dev css-loader@2.0.2
6.npm install style-loader@0.23.1 --save-dev
7.配置webpack.json.js文件

在這里插入圖片描述

8.index.html的使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> 你好 <h2> 你好 </h2> <script src="dist/bundle.js"></script> </body> </html>

5.2 less的loader使用(同理)

1.創建less文件

在這里插入圖片描述

@fontSize: 50px; @fontColor: orange; body{ font-size: @fontSize; color: @fontColor; }

2.引入less文件（main.js） //1.使用commonjs的模塊化規范 const {add,mul} = require('./js/mathUtils.js'); console.log(add(20,30)); console.log(mul(20,30)); //2.使用ES6的模塊化規范 import {name,height} from './js/info.js'; console.log(name); console.log(height); //3.依賴css文件 require("./css/normal.css") //4.依賴less文件 require("./css/special.less")
3.npm install less-loader@4.1.0 --save-dev 和npm install less@3.9.0 --save-dev
4.配置webpack.json.js文件

在這里插入圖片描述

5.打包 run build

5.3 圖片文件處理

1.創建img文件

在這里插入圖片描述

2.修改css文件 body { /* background-color:red; */ background-image: url("../img/timg.jpg"); }
3.直接打包會出錯，需要安裝url-loader包 npm install url-loader@1.1.2 --save-dev
4.修改webpack.json.js文件

在這里插入圖片描述

5.這時候打包會成功，但是換了一張大的圖片就會報錯

在這里插入圖片描述

6、安裝file-loader處理大文件npm install file-loader@3.0.1 --save-dev
7、再次打包即可成功

在這里插入圖片描述

注：可以發現，對于大的圖片打包成功會輸出到dist文件夾下，此時引用的話會找不到，需要配置下路徑

8.修改webpack.config.js

在這里插入圖片描述

9.另外對于生成的圖片名字太長，我們可以配置下生成規則--webpack.config.js,表示生成名字+8位哈希值+擴展名

在這里插入圖片描述

5.4 babel的使用（es6轉es5）

1.npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
2.配置webpack.json.js文件

在這里插入圖片描述

run build

6.webpack中配置Vue

6.1 引入vue.js

1 . npm install vue@2.5.21 --save 因為我們后續是在實際項目中也會使用vue的，所以并不是開發時依賴
2 . main.js引入 //1.使用commonjs的模塊化規范 const {add,mul} = require('./js/mathUtils.js'); console.log(add(20,30)); console.log(mul(20,30)); //2.使用ES6的模塊化規范 import {name,height} from './js/info.js'; console.log(name); console.log(height); //3.依賴css文件 require("./css/normal.css") //4.依賴less文件 require("./css/special.less") //5.使用Vue進行開發 import Vue from "vue" new Vue({ el:'#app', data:{ name : 'codewhy' } })
3.run build（報錯）---這個錯誤說的是我們使用的是runtime-only版本的Vue，

在這里插入圖片描述

4.修改webpack.config.js配置，即可成功

在這里插入圖片描述

5.index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body > <div id="app"> 你好 </div> <h2> 你好 </h2> <script src="dist/bundle.js"></script> </body> </html>

6.2 el和template的區別

正常運行之后，我們來考慮另外一個問題：
如果我們希望將data中的數據顯示在界面中，就必須是修改index.html
如果我們后面自定義了組件，也必須修改index.html來使用組件
但是html模板在之后的開發中，我并不希望手動的來頻繁修改，是否可以做到呢？

定義template屬性：
在前面的Vue實例中，我們定義了el屬性，用于和index.html中的#app進行綁定，讓Vue實例之后可以管理它其中的內容
這里，我們可以將div元素中的{{message}}內容刪掉，只保留一個基本的id為div的元素
但是如果我依然希望在其中顯示{{message}}的內容，應該怎么處理呢？
我們可以再定義一個template屬性，代碼如下：

在這里插入圖片描述

那么，el和template模板的關系是什么呢？
在我們之前的學習中，我們知道el用于指定Vue要管理的DOM，可以幫助解析其中的指令、事件監聽等等。
而如果Vue實例中同時指定了template，那么template模板的內容會替換掉掛載的對應el的模板。

這樣做有什么好處呢？
這樣做之后我們就不需要在以后的開發中再次操作index.html，只需要在template中寫入對應的標簽即可

6.3 分離template模板

書寫template模塊非常麻煩怎么辦呢？
沒有關系，稍后我們會將template模板中的內容進行抽離。
會分成三部分書寫：template、script、style，結構變得非常清晰。

在這里插入圖片描述

1 .App.vue文件 <template> <div> <h2 class="title">{{message}}</h2> <button @click="btnClick">按鈕</button> <h2>{{name}}</h2> <Cpn/> </div> </template> <script> import Cpn from "./Cpn.vue" export default { name:"App", components: { Cpn }, data(){ return { name : 'codewhy', message:"123" } }, methods:{ btnClick(){ } } } </script> <style scoped> .title{ color:green; } </style>
2 .子組件Cpn.vue文件 <template> <div> <h2 class="title">我是cpn組件的標題</h2> <p>我是cpn組件的內容</p> <h2>{{name}}</h2> </div> </template> <script> export default { name:"Cpn", data(){ return { name : 'Cpn的組件的name', } }, methods:{ btnClick(){ } } } </script> <style scoped> .title{ color:green; } </style>
3 .main.js引入App.vue //1.使用commonjs的模塊化規范 const {add,mul} = require('./js/mathUtils.js'); console.log(add(20,30)); console.log(mul(20,30)); //2.使用ES6的模塊化規范 import {name,height} from './js/info.js'; console.log(name); console.log(height); //3.依賴css文件 require("./css/normal.css") //4.依賴less文件 require("./css/special.less") //5.使用Vue進行開發 import Vue from "vue" // import App from "./vue/app" import App from './vue/App.vue' const app = new Vue({ el:'#app', // 如果同時有el和template，會直接用template 替換掉el內容 template: <App/> , components:{ App } })
4 .index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body > <div id="app"> 你好 </div> <h2> 你好 </h2> <script src="dist/bundle.js"></script> </body> </html>

7.認識plugin

7.1 添加版權聲明

在webpack.config.js配置如下

在這里插入圖片描述

重新打包

在這里插入圖片描述

7.2 HtmlWebpackPlugin

目的：將index.html打包到dist中
1.安裝插件npm install html-webpack-plugin@3.2.0 --sava-dev
2.在webpack.config.js導入

在這里插入圖片描述

3.因為index.html的js 打包后會自動引入，所以注釋了dist 以及下面的內容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body > <div id="app"> 你好 </div>  </body> </html>
4.最后生成的如下

在這里插入圖片描述

7.3 壓縮js的插件

1.npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
2.配置webpack.config.js

在這里插入圖片描述

3.npm run build
對js丑化

在這里插入圖片描述

8.plugin的使用搭建本地服務器

webpack提供了一個可選的本地開發服務器，這個本地服務器基于node.js搭建，內部使用express框架，可以實現我們想要的讓瀏覽器自動刷新顯示我們修改后的結果。
不過它是一個單獨的模塊，在webpack中使用之前需要先安裝它
npm install --save-dev webpack-dev-server@2.9.1

修改webpack.config.js
devserver也是作為webpack中的一個選項，選項本身可以設置如下屬性：
contentBase：為哪一個文件夾提供本地服務，默認是根文件夾，我們這里要填寫./dist
port：端口號
inline：頁面實時刷新
historyApiFallback：在SPA頁面中，依賴HTML5的history模式

在這里插入圖片描述

修改package.json文件

在這里插入圖片描述

開始熱部署npm run dev

在這里插入圖片描述

這樣就會實現，當文件改變的時候，頁面會自動修改，因為此時這些修改保存到了內存中，類似于java的熱部署

補充1：（自動打開鏈接）

在這里插入圖片描述

補充2：js壓縮在開發中，不應該使用

在這里插入圖片描述

9.webpack的配置分離

目的：開發時，使用一個配置文件；發布時使用另一個配置文件
npm install webpack-merge@4.1.5 --save-dev 安裝merge包，用于合并下面的配置文件
所以將webpack.config.js抽離成3個文件
1 . base.config.js const path = require('path') const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') const uglifyjsWebpackPlugin = require('uglifyjs-Webpack-plugin') module.exports = { entry : "./src/main.js", output: { path: path.resolve(__dirname,'../dist'), //動態獲取絕對路徑,__dirname是node中全局變量 filename : "bundle.js", //publicPath: 'dist/' }, plugins:[ new webpack.BannerPlugin('最終版權swz所有！'), new HtmlWebpackPlugin({ template:'index.html' }), //new uglifyjsWebpackPlugin() ], module: { rules: [ { test: /\.css/,//style¨E45Eloader將模塊的導出作為樣式添加到DOM中//css¨E45Eloader解析CSS文件后，使用import加載，并且返回CSS代碼//使用多個loader時，是從右向左use:¨E91E′style¨E45Eloader′,′css¨E45Eloader′¨E93E¨E125E,¨E123Etest:/¨E92E.less/, // style-loader 將模塊的導出作為樣式添加到 DOM 中 // css-loader 解析 CSS 文件后，使用 import 加載，并且返回 CSS 代碼 //使用多個loader時，是從右向左 use: ['style-loader','css-loader'] }, { test: /\.less/,//style¨E45Eloader將模塊的導出作為樣式添加到DOM中//css¨E45Eloader解析CSS文件后，使用import加載，并且返回CSS代碼//使用多個loader時，是從右向左use:¨E91E′style¨E45Eloader′,′css¨E45Eloader′¨E93E¨E125E,¨E123Etest:/¨E92E.less/, use: [{ loader: 'style-loader' // creates style nodes from JS strings }, { loader: 'css-loader' // translates CSS into CommonJS }, { loader: 'less-loader' // compiles Less to CSS }] }, { test: /\.(png|jpg|jpeg|gif)/i,use:¨E91E¨E123Eloader:′url¨E45Eloader′,options:¨E123E//當加載的圖片，小于limit時，會將圖片編譯成base64字符串形式//反之，需要使用file¨E45Eloader沒模塊進行加載limit:13000,//¨E91E¨E93E表示變量name:′img/¨E91Ename¨E93E.¨E91Ehash:8¨E93E.¨E91Eext¨E93E′¨E125E¨E125E¨E93E¨E125E,¨E123Etest:/¨E92E.m?js/i, use: [ { loader: 'url-loader', options: { //當加載的圖片，小于limit時，會將圖片編譯成base64字符串形式 //反之，需要使用file-loader沒模塊進行加載 limit: 13000, //[]表示變量 name: 'img/[name].[hash:8].[ext]' } } ] }, { test: /\.m?js/i,use:¨E91E¨E123Eloader:′url¨E45Eloader′,options:¨E123E//當加載的圖片，小于limit時，會將圖片編譯成base64字符串形式//反之，需要使用file¨E45Eloader沒模塊進行加載limit:13000,//¨E91E¨E93E表示變量name:′img/¨E91Ename¨E93E.¨E91Ehash:8¨E93E.¨E91Eext¨E93E′¨E125E¨E125E¨E93E¨E125E,¨E123Etest:/¨E92E.m?j exclude: , : { : , : { : [] } } }, { : s/,//exclude 排除，include包含/(node_modules|bower_components)/useloader'babel-loader'optionspresets'es2015'test/\.vue/,use:¨E91E′vue¨E45Eloader′¨E93E¨E125E¨E93E¨E125E,resolve:¨E123Ealias:¨E123E′vue/, : [] } ] }, :{ : { use'vue-loader'resolvealias'vue/,use:¨E91E′vue¨E45Eloader′¨E93E¨E125E¨E93E¨E125E,resolve:¨E123Ealias:¨E123E′vu: } }} e'"vue/dist/vue.esm.js"
2 . prod.config.js const uglifyjsWebpackPlugin = require('uglifyjs-Webpack-plugin') const webpackMerge = require('webpack-merge') const baseConfig = require('./base.config') module.exports = webpackMerge(baseConfig, {plugins:[ new uglifyjsWebpackPlugin() ] })
3 . dev.config.js const webpackMerge = require('webpack-merge') const baseConfig = require('./base.config') module.exports = webpackMerge(baseConfig, { devServer:{ contentBase: "./dist", inline: true } })
修改配置文件package.json

在這里插入圖片描述

注：以上安裝的模塊的版本要對應！！！

學習視頻： https://www.bilibili.com/video/BV15741177Eh?p=90&spm_id_from=pageDriver

念

HTML Webpack Plugin這是一個webpack插件，它簡化了HTML文件的創建，以服務于你的webpack bundle。這對于在文件名中包含哈希的webpack包特別有用，因為文件名會改變每次編譯。您可以讓插件為您生成一個HTML文件，或者使用lodash模板提供您自己的模板，或者使用您自己的加載器。

安裝

針對webpack的版本，需要安裝對應不同的版本。

webpack4

npm i --save-dev html-webpack-plugin@4

webpack5

  npm i --save-dev html-webpack-plugin

使用

這個插件會為你生成一個HTML5文件，其中包含了使用script標簽的所有webpack的bundle。

只需將插件添加到webpack配置中，如下所示：

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    entry: "./src/index.js",
    output: {
        filename:"index_bundle.js",
        path: path.resolve(__dirname,"dist")
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

這將生成一個包含以下內容的文件dist/index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script>
  </body>
</html>

如果您有多個webpack入口點，它們都將與script標簽一起包含在生成的HTML中。

如果你在webpack的輸出中有任何CSS資產(例如，用mini-css-extract-plugin提取的CSS)，那么這些將包含在HTML頭部的標簽中。

如果你有使用它的插件，html-webpack-plugin應該在任何集成插件之前。

選項

你可以傳遞一個配置選項到html-webpack-plugin。允許的值如下：

title

類型：String

默認值：Webpack App

描述：要用于生成的HTML文檔的標題。

filename

類型：String或Function

默認值：index.html

描述：要寫入HTML的文件的文件名。默認為index.html。您也可以在這里指定一個子目錄(例如:assets/admin.html)。占位符[name]將被條目名稱替換。也可以是一個函數，例如(entryName) => entryName + '.html'。

template

類型：String

默認值：空

描述：默認情況下，它將使用src/index.ejs(如果存在的話)。

templateContent

類型：string|Function|false

默認值：false

描述：可以用來代替模板提供一個內聯模板。

templateParameters

類型：Boolean|Object|Function

默認值：false

描述：允許覆蓋模板中使用的參數。

inject

類型：Boolean|String

默認值：true

描述：true || 'head' || 'body' || false將所有資產注入到給定的模板或templateContent中。當傳遞'body'時，所有javascript資源將被放置在body元素的底部。'head'將把腳本放置在head元素中。設置為true時，將根據scriptLoading選項，決定是把腳本添加到head還是body中。使用false禁用自動注入。

publicPath

類型：String|'auto'

默認值：auto

描述：publicPath屬性值用于script和link 標簽。

scriptLoading

類型：blocking|defer

默認值：defer

描述：現代瀏覽器支持非阻塞javascript加載(“defer”)，以提高頁面啟動性能。

favicon

類型：String

默認值：空

描述：將給定的圖標路徑添加到輸出的HTML中。

meta

類型：Object

默認值：{}

描述：允許注入meta標簽。例如:meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}。

base

類型：Object|String|false

默認值：false

描述：注入一個base標簽。如base:“https://example.com/path/page.html

minify

類型：Boolean|Object

默認值：如果mode為'production'則為true，否則為false

描述：控制是否以及以何種方式壓縮輸出。

hash

類型：Boolean

默認值：false

描述：如果為true，則附加一個唯一的webpack編譯哈希到所有包含的腳本和CSS文件。這對于緩存銷毀是很有用的

cache

類型：Boolean

默認值：true

描述：只有當文件被更改時，才會刪除它。

showErrors

類型：Boolean

默認值：true

描述：錯誤的詳細信息將寫入HTML頁面。

chunks

類型：?

默認值：?

描述：只允許添加一些chunk(例如：只添加unit-test 的chunk)

chunksSortMode

類型：String|Function

默認值：auto

描述：允許控制塊在包含到HTML之前應該如何排序。允許的值是'none' | 'auto' | 'manual' | {Function}。

excludeChunks

類型：Array.<string>

默認值：空

描述：允許你跳過一些chunk(例如不添加unit-test 的chunk)。

xhtml

類型：Boolean

默認值：false

描述：如果為true，則將link標簽呈現為自動關閉(XHTML兼容)

下面是一個webpack配置示例，演示了如何使用這些選項：

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      filename: 'assets/admin.html'
    })
  ]
}

生成多個HTML文件

要生成多個HTML文件，請在插件數組中多次聲明插件。

配置示例：

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(), // Generates default index.html
    new HtmlWebpackPlugin({  // Also generate a test.html
      filename: 'test.html',
      template: 'src/assets/test.html'
    })
  ]
}

編寫模板

如果默認生成的HTML不能滿足您的需要，您可以提供自己的模板。最簡單的方法是使用template選項并傳遞一個定制的HTML文件。html-webpack-plugin會自動將所有必需的CSS, JS, manifest和favicon文件注入到標記中。

配置文件的部分內容：

plugins: [
  new HtmlWebpackPlugin({
    title: 'Custom template',
    // Load a custom template (lodash by default)
    template: 'index.html'
  })
]

模板文件index.html的內容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
  </body>
</html>

如果您已經有一個模板加載器，您可以使用它來解析模板。請注意，如果您指定了html加載器并使用.html文件作為模板，也會發生這種情況。

module: {
  loaders: [
    { test: /\.hbs$/, loader: "handlebars-loader" }
  ]
},
plugins: [
  new HtmlWebpackPlugin({
    title: 'Custom template using Handlebars',
    template: 'index.hbs'
  })
]

您可以使用現成的lodash語法。如果inject特性不適合你的需要，而你又想完全控制資產的位置，可以使用html-webpack-template項目的默認模板作為你自己編寫模板的起點。

在線咨詢

上一篇：JavaScript實現HTML輪播，簡單有效
下一篇：十大視頻搬運網站

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

webpack最常用的插件：HtmlWebpackPlugin

一些常用的屬性

使用自定義 html 模板

自定義 html 注入變量

結尾

1.認識webpack

2.webpack的安裝

3.webpack的起步

4.webpack的配置

5.loader的使用

5.1 css的loader使用

5.2 less的loader使用(同理)

5.3 圖片文件處理

5.4 babel的使用（es6轉es5）

6.webpack中配置Vue

6.1 引入vue.js

6.2 el和template的區別

6.3 分離template模板

7.認識plugin

7.1 添加版權聲明

7.2 HtmlWebpackPlugin

7.3 壓縮js的插件

8.plugin的使用搭建本地服務器

9.webpack的配置分離

念

安裝

使用

選項

生成多個HTML文件

編寫模板

您的項目需求