html-webpack-plugin的使用

最新推荐文章于 2024-08-24 10:11:39 发布

Pg-Man

最新推荐文章于 2024-08-24 10:11:39 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html-webpack-plugin的使用

本文链接：https://blog.youkuaiyun.com/sinat_38832964/article/details/91992458

前端专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍如何在Webpack项目中引入html-webpack-plugin插件，实现自动创建并引用bundle.js文件，简化开发流程，同时配置热更新，提升开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装html-webpack-plugin

1 .命令：npm i html-webpack-plugin -D
2 .在webpack.config.js中配置：

const path = require('path');
//启用热更新的第二步,导入webpack
const webpack = require('webpack');
//导入在内存中生成html页面的插件,只要是插件，都要放到plugins节点中去
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    devServer: { //这是配置webpack-dev-server命令参数的第二种形式
        open: true, //自动打开浏览器
        port: 3100, //设置端口
        contentBase: 'src', //指定托管的根目录
        hot: true //启用热更新的第一步
    },
    plugins: [ //配置插件的节点
        //启用热更新第三步
        new webpack.HotModuleReplacementPlugin(), //new一个热更新的模块对象
        new htmlWebpackPlugin({ //创建一个在内存中生成html页面的插件
            template : path.join(__dirname,'./src/index.html'), //指定模板页面，根据指定的路径生成内存中的页面
            filename : 'index.html' //指定内存中生成的页面的名称
        })
    ]
}

使用 html-webpack-plugin 之后，我们不需要手动处理bundle.js的引用路径了，因为这个插件，已经帮我们自动创建了一个合适的script，并且，引用了正确的路径