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文件中就拥有了我们开发的内容