1. 安裝使用處理html的插件

說明:

webpack打包html文件資源,不是使用loader而是使用插件
使用html-webpack-plugin插件自動生成html文件

1.1 下載插件

yarn add html-webpack-plugin -D

1.2 配置插件

在webpack.config.js中配置插件說明

引入下載好的插件
在plugins中配置插件

代碼如下:

// 1. 引入處理html插件,

const HtmlWebpackPlugin =

require(“html-webpack-plugin”)const {resolve} = require(“path”);module.exports = {
entry: “./src/main.js”,
output:{
filename:”bundle.js”,
path: resolve(__dirname,”dist”)
},
module: {
rules:[
{
test: /\.css$/,
use:[“style-loader”,”css-loader”]
}
]
},
// 配置插件
plugins:[
// 配置處理html插件
new HtmlWebpackPlugin()
],
mode:”development”}

1.3 打包結果說明

通過webpack命令打包

會發現打包後的index.html是一個空的html文件 ,沒有其他結構內容
因為插件html-webpack-plugin是自動創建一個新的html文件,並自動引入bundle.js
因此我們自己開發的index.html內容並沒有處理到打包後的html文件中

配置代碼如下:

const HtmlWebpackPlugin =

require(“html-webpack-plugin”)const {resolve} = require(“path”);module.exports = {
// …

plugins:[
new HtmlWebpackPlugin({
// 配置html打包模板
template:”./src/main.html”
})
]

// …}

2. 將我們自己寫html內容插入打包後的html文件

2.1 說明

src文件夾使我們開發文件夾,因此我們可能會在這個文件夾中開發html文件內容
但是html-webpack-plugin會在打包的dist目錄中生成新的html文件,
新生成的文件中,不包含我們開發的html文件內容
如果我們需要將自己開發的html內容也插入到打包後的html文件中,就需要配置

2.2 在src文件中新建html,並開發內容

<body>
<div>Hello World</div></body>

2.3 在webpack.config.js配置插件

在webpack.config.js的插件html-webpack-plugin中配置html模板

將我們開發的html文件中的內容插入到plugin生成的html文件中

代碼如下:

const HtmlWebpackPlugin =

require(“html-webpack-plugin”)const {resolve} = require(“path”);module.exports = {
// …
plugins:[
new HtmlWebpackPlugin({
// 配置html打包模板
template:”./src/main.html”
})
]
// …}

此時,打包後, 查看dist目錄中index.html文件中就擁有了我們開發的內容