安装html-webpack-plugin插件，避免每次在项目里面每次手动新建index.html

最新推荐文章于 2022-05-08 13:13:02 发布
最新推荐文章于 2022-05-08 13:13:02 发布
阅读量169 收藏
点赞数
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48462578/article/details/115147974
版权
通过安装html-webpack-plugin，可以避免在webpack项目中手动创建index.html文件。该插件能根据指定的模板自动生成HTML。
摘要由CSDN通过智能技术生成

安装html-webpack-plugin插件，避免每次在项目里面手动新建index.html-----webpack

cmd命令安装
cnpm install html-webpack-plugin -D

主要的代码，以src下的index.html（需要手动创建）为模板

	plugins:[
		new Htmlwebpackplugin({
   
			template:'./src/index.html'
		})
	]

完整的代码

const path = require("path")
最低0.47元/天 解锁文章
小蔡来了
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Webpack不生成index.html
likunpeng6656201的博客
10-22 1653
没有导出你的最后2个插件，并且没有指定html文件名dist，因为HtmlWebpackPlugin应该生成相对于path，下面是固定配置： var path = require('path') var webpack = require('webpack') var HtmlWebpackPlugin = require('html-webpack-plugin'); ...
webpack之html-webpack-plugin简单配置
coding...
04-27 3729
前言：本文简单配置了webpack的一个插件：html-webpack-plugin;演示了html-webpack-plugin帮我们做的工作。正文：plugin是webpack一个比较重要的概念。当前webpack.config.js配置：const path = require('path'); module.exports={ entry :{ p...
html核心插件,webpack核心，Plugins让打包更快捷
weixin_32048835的博客
06-24 126
0.jpg写在前面前面的文章中，我们使用loader对不同的文件进行打包，也介绍了一些loader的高级配置和介绍，今天开始，我们将介绍，能让webpack打包更便捷的Plugins，也就是webpack的插件Plugins我们知道，在我们通常的项目中，index.html会跟随在我们的出口dist目录中的，在我们当前的目录中，如果我们删掉了dist中的index.html，重新打包后，这个文件并...
webpack打包——htmlWebpackPlugin插件，打包自动生成index.html文件
ducaifeng86的博客
11-21 1462
引言 webpack打包的时候，为了打包结束后自动生成index.html模板，而不进行手动的创建index.html。需要使用htmlWebpackPlugin插件。下面就来讲解如何使用htmlWebpackPlugin插件来自动生成index.html文件 第一步：安装htmlWebpackPlugin插件 使用命令：npm install html-webpack-plugin -D ...
html-webpack-plugin插件实现在内存中生成index.html
qq_124917348的博客
07-17 1681
我们使用webpack-dev-server能够实现自动打包编译，生成的bundle.js在内存中，不被用户看到，还要设置script的src标签为 /bundle.js 才能实现自动打包编译。那么我们能否不用自动配置script的src属性呢？ 使用webpack的插件，html-webpack-plugin能够实现在内存中创建index.html，并且不用设置script标签，这个插...
web-webpack-plugin：替代html-webpack-plugin
02-03
web-webpack-plugin 想全面学习Webpack？试试它： 不错替代品，可以使webpack将HTML用作条目并处理多页。 安装 npm i web-webpack-plugin --save-dev const { WebPlugin , AutoWebPlugin } = require ( 'web-...
html-webpack-externals-plugin：与html-webpack-plugin一起使用以使用预先打包的供应商捆绑包的Webpack插件
02-06
html-webpack-externals-plugin :police_car_light: 已淘汰 :police_car_light: 抱歉，该模块已不再维护，其功能已由jharris4， 和。 您可能会遇到问题，并且最近的Webpack项目尚未使用它。 与一起使用以使用...
html-validate-webpack-plugin:用于webpackHTML-validate.org插件
05-23
html-validate-webpack-plugin 用于webpack的插件关于插件此插件是围绕 cli的简单包装，可在每次Webpack编译后自动进行验证。安装npm install html-validate-webpack-plugin --save-dev 注意：安装html-validate并...
csp-html-webpack-plugin：一个插件，与HTMLWebpackPlugin结合使用时，会将CSP标签添加到HTML输出中
02-06
npm i --save-dev csp-html-webpack-plugin 基本用法 在您的webpack配置中包括以下内容： const HtmlWebpackPlugin = require ( 'html-webpack-plugin' ) ; const CspHtmlWebpackPlugin = require ( 'csp-...
使用html-webpack-plugin’入再内存中生成 html 页面插件
12-14
在`html-webpack-plugin`配置完成后，你不再需要在`index.html`中手动引入打包后的`bundle.js`。你可以注释掉或删除`<script>`标签，因为插件会在生成的HTML文件中自动处理这个过程。 4. **启动Webpack** 保存...
Webpack 遇到的坑之 HtmlWebpackPlugin
Lhy_JL的博客
07-05 2000
异常： ERROR in Error: Child compilation failed: Entry module not found: Error: Can't resolve 'D:\VueProjects\Protal_works\webpack配置vue\index.html' in 'D:\VueProjects\Protal_works\w ebpack配置vue': Error: Can't resolve 'D:\VueProjects\Protal_works\webpa
html-webpack-plugin详解
qq_28091923的博客
11-09 146
引言 最近在react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用： 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题 可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口 有了这种插件，那么...
webpack html自动引入,webpack进阶【4】：打包后自动生成html [html-webpack-plugin插件]...
weixin_36049183的博客
05-31 256
打包后自动生成html [html-webpack-plugin插件]注意： 本进阶在webpack进阶【3】的基础上进行一、为什么需要html-webpack-plugin插件如果没有用插件，index.html中我们需要引入打包后的js文件，以后更多还需要引入css文件。image.pngindex.html引用的文件名要和webpack.config.js中output中fileName中的...
webpack基础四：html的自动引入打包输出的模块：html-webpack-plugin的使用
a13085759937的博客
05-08 684
一.安装 npm install html-webpack-plugin -D 二.配置 const path = require("path"); const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { devtool: 'inline-source-map', // 快速找到代码报错的文件和行数（帮助我们bug定位） mode: 'development', // develpm
Webpack5 踩坑之（html-webpack-plugin）
热门推荐
vv_bug
02-18 1万+
2021 开工第一天就给我个大大的惊喜。 ERROR in Error: The loader "/home/project/vue3-demo/node_modules/html-webpack-plugin/lib/loader.js!/home/project/vue3-demo/public/index.html" didn't return html. - index.js:339 HtmlWebpackPlugin.evaluateCompilationResult [vu
webpack4-03-生成html、css3前缀、babel配置等..
weixin_33991727的博客
05-09 315
目录结构 lesson-03 |- build |- webpack-config.js // 配置文件 |- dist // 生成打包结果 |- node-modules |- public // 静态资源 |- index.html // 模板文件 |- ...
electron-vue 项目创建及常见问题
开发过程中的记录
03-23 474
electron-vue项目创建，此文章建立在已有electron环境的基础上 全局安装脚手架 npm install -g vue-cli 安装项目模板 vue init simulatedgreg/electron-vue my-project ? Application Name (my-project) 输入你的项目名称 ? Application Id (com.example.yourapp) 输入id，不需要可直接回车 ? Application Version (0.0.1
html文件中引入＜link/＞标签,webpack打包报错：document is not defined
qq_45327886的博客
03-16 2050
document is not defined html中引入link,打包
webpack4实战三--插件使用（html-webpack-plugin篇）
Locker的博客
11-01 777
因为在打包时，webpack默认只会打包js，也就是说，咱们打包出来的dist文件夹中只有js文件而已，并没有html啥的其他文件。 当我们想查看打包后的js文件是否可以使用的话，我们需要将html文件拷贝到dist目录下，然后在html文件中使用script标签引用打包好的js文件，步骤很是麻烦。 那么可以怎么简化这些操作，自然是使用插件咯，标题白写的不成。 进入正题： 一、找到对应功能的插件 有一个插件可以实现自动添加script引用到html文件的操作，html-webpack-plugin
html-webpack-plugin插件不生效
最新发布
03-28
如果html-webpack-plugin插件不生效，可能有以下几个原因： 1. 没有正确安装插件：确保已经正确安装了html-webpack-plugin插件。 2. 配置错误：检查webpack.config.js文件中的html-webpack-plugin插件配置是否正确。确保指定了正确的模板文件路径和输出文件路径。 3. 缓存问题：如果已经安装了插件，但是更改了插件的配置后还是没有生效，可能是缓存引起的问题。可以尝试删除缓存并重新构建项目。 4. webpack版本问题：如果使用的webpack版本不兼容html-webpack-plugin插件，则插件可能无法生效。可以尝试升级或降级webpack版本来解决问题。 5. 其他问题：如果以上方法都无法解决问题，可能是其他未知原因导致的。可以尝试查看控制台输出的错误信息，或者在github等社区寻求帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值