webpack加载html资源

最新推荐文章于 2024-05-11 23:44:44 发布

ThanatosY

最新推荐文章于 2024-05-11 23:44:44 发布

阅读量424

点赞数 8

分类专栏： webpack学习文章标签： webpack arcgis 前端

本文链接：https://blog.csdn.net/Fight1124/article/details/135167562

版权

webpack学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

加载Html资源

使用HtmlWebpackPlugin插件，该插件主要用于输出html文件到打包文件夹中（会自动将js文件插入进去），或者指定html模板然后根据该模板生成打包输出的html文件（保持原有结构，css等文件也会按原结构引用）

首先通过命令窗口安装该插件，输入命令npm install -D html-webpack-plugin

然后在webpack.config.js配置文件中引入该插件并且在plugin中注册

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
	plugin: [
		new HtmlWebpackPlugin({
            // 指定html模板，会保留该模板的结构
            // 依据该模板创建新的html文件
			template: paht.resolve(__dirname, 'public/index.html')
		})
	]
}

最后将模板html中的js引入代码注释掉或删除掉（建议删除）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<!-- <script src="../dist/static/js/main.js"></script> -->
<body>
    <h1>Hello</h1>
    <div class="test"></div>
    <span class="iconfont icon-shubiao"></span>
    <span class="iconfont icon-xianshiqi"></span>
    <span class="iconfont icon-jianpan"></span>
</body>
</html>

最后执行npx webpack 命令即可在打包输出文件夹中看到生成的html文件了

ThanatosY

关注

8
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
webpack加载html资源

然后在webpack.config.js配置文件中引入该插件并且在plugin中注册。最后将模板html中的js引入代码注释掉或删除掉（建议删除）命令即可在打包输出文件夹中看到生成的html文件了。首先通过命令窗口安装该插件，输入命令。
复制链接

扫一扫