webpack使用方法（四）：使用HtmlWebpackPlugin插件

皮一下就很开心、

已于 2022-02-21 16:07:09 修改

阅读量1.5k

点赞数 1

文章标签： webpack javascript 前端

于 2022-02-20 23:17:07 首次发布

本文链接：https://blog.csdn.net/simpleasong/article/details/123037256

版权

文章目录

前言
一、安装HtmlWebpackPlugin插件
二、配置HtmlWebpackPlugin插件

前言

在前几篇文章中，当我们打包完成后想看运行效果，还需要自己手动去修改index.html中加载bundle.js的路径，这里我们可以使用HtmlWebpackPlugin插件来解决一下这个问题。

一、安装HtmlWebpackPlugin插件

还是在根目录安装，在终端输入命令行

npm install html-webpack-plugin -D

二、配置HtmlWebpackPlugin插件

在根目录创建03-manage-output文件夹，将setup文件夹下的src文件夹、index.html、webpack.config.js文件复制进来。

修改一下index.html文件的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用HtmlWebpackPlugin插件</title>
</head>
<body>
</body>
</html>

打开webpack.config.js，做以下配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname, './dist')
    },
    mode:'none',
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html',
            filename:'app.html',
            inject:'body'
        })
    ]
}

1）template指定当前目录下的index.html为模板
2）filename指定输出文件的文件名
3）inject用来定义自动生成的script标签在什么位置

进入03-manage-output目录，执行打包命令

npx webpack

打包完成后可以看到在当前目录下产生了dist文件夹以及app.html和bundle.js两个子文件
在这里插入图片描述
app.html文件内容如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用HtmlWebpackPlugin插件</title>
</head>
<body>
<script defer src="bundle.js"></script></body>
</html>

去浏览器中运行app.html，最后同样输出hello world。

皮一下就很开心、

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack使用方法（四）：使用HtmlWebpackPlugin插件

文章目录前言一、安装HtmlWebpackPlugin插件二、配置HtmlWebpackPlugin插件前言在前几篇博客中，当我们打包完成后想看运行效果，还需要自己手动去修改index.html中加载bundle.js的路径，这里我们可以使用HtmlWebpackPlugin插件来解决一下这个问题。一、安装HtmlWebpackPlugin插件还是在根目录安装，在终端输入命令行npm install html-webpack-plugin -D二、配置HtmlWebpackPlugin插件
复制链接

扫一扫