webpack:配置html-webpack-plugin生成预览页面

最新推荐文章于 2024-07-18 09:55:35 发布
最新推荐文章于 2024-07-18 09:55:35 发布
阅读量318 收藏 1
点赞数
分类专栏： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42767647/article/details/107190920
版权

未配置该插件之前，一开始打开的是如下页面：
在这里插入图片描述
该插件的作用就是，一打开就是HTML页面，安装插件的方法：

1.安装插件

npm install html-webpack-plugin -D

在这里插入图片描述
2.修改webpack.config.js文件的头部区域，添加以下信息：
在这里插入图片描述
3.修改webpack.config.js文件中向外导出配置对象，如下：
在这里插入图片描述
4.运行
在这里插入图片描述
打开页面后，就是刚刚设的那个页面，如我设的是index.html页面，打开就是我所设的index.html页面，而不是有文件夹那个页面：
在这里插入图片描述

今天也在好好加油呀
关注
专栏目录
11.webpack-配置html-webpack-plugin生成预览页面
weixin_45847120的博客
03-05 137
html-webpack-plugin html-webpack-plugin 将index.html文件也生成到了内存中 这样直接访问 http://localhost:8080/ 就可以打开 index.html 文件 html-webpack-plugin 还会自动引入js文件 不需要我们引入js文件 1. 安装 html-webpack-plugin 运行 npm i -D html-w...
webpack基本使用——配置生成预览页面
javaxampp的博客
10-22 143
安装 npm install html-webpack-plugin -D 修改webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin');//导入插件 const path = require('path'); //创建插件实例对象 const htmlPlugin = new HtmlWebpackPlugin({ template:'./src/index.html',//指定显示首页 filename: '
webpack系列之配置 html-webpack-plugin 生成预览页面
老__L的博客
12-15 216
配置 html-webpack-plugin 生成预览页面
常用的 webpack -- HtmlWebpackPlugin(了解)
最新发布
m0_71071209的博客
07-18 649
HtmlWebpackPlugin 是webpack 的插件,主要作用有以下几个方面自动生成 HTML 文件：在 webpack 构建过程中自动创建 HTML 文件。插入资源链接：自动将编译后的 CSS 和 JavaScript 文件链接插入到 HTML 中。模板支持：可以使用自定义 HTML 模板，并在构建时替换模板中的变量。环境变量：支持在 HTML 中使用 webpack 环境变量，如。多入口支持：可以为每个入口点生成不同的 HTML 文件，适用于多页面应用。
webpack中使用html-webpack-plugin生成预览页面
weixin_46144394的博客
04-21 180
vue项目中，使用webpack配置进行在localhost下默认进入index.html页面的配置 使用html-webpack-plugin将src的index页面复制到根目录中并可以默认打开 运行npm install html-webpack-plugin -D 命令，安装生产预览页面的插件 修改webpack.config.js文件头部区域，添加如下配置信息： //导入生成预览页面的插件 const HtmlWebpackPlugin = require('html-webpack-plugi
html-webpack-plugin插件配置预览页面
宋清的博客
06-05 232
html-webpack-plugin插件配置预览页面 运行npm install html-webpack-plugin -D 命令安装插件。 之后再webpack.config.js头部添加如下代码。 const HtmlWebpackPlugin=require('html-webpack-plugin') const htmlPlugin=new HtmlWebpackPlugin({//创建插件的实例对象 template:'./src/indec.html',//指定用到的模板文件
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-webpack-inject-attributes-plugin:使用html-webpack-plugin向标签添加ext属性的简单而强大的方法
05-06
html-webpack-inject-attributes-plugin 添加自定义属性以注入标签 安装 npm install html - webpack - inject - attributes - plugin - D 用 请在html-webpack-plugin之后使用它，尤其是在webpack2 +中。 添加到...
react-app-rewire-html-webpack-plugin:重新连接create-react-app以覆盖项目中的html-webpack-plugin
05-23
重新连接create-react-app以覆盖项目中的html-webpack-plugin 让您覆盖选项 安装 $ yarn add react-app-rewired react-app-rewire-html-webpack-plugin -D $ npm install react-app-rewired react-app-rewire-...
webpack-filter-warnings-plugin:允许您从Webpack编译中隐藏某些警告
05-14
webpack-filter-warnings-plugin 允许您从Webpack编译中隐藏某些警告 安装 npm i -D webpack-filter-warnings-plugin 用法 // webpack.config.js const { FilterWarningsPlugin } = require ( 'webpack-filter-...
大华摄像头通过webplugin.exe实现web界面视频预览,亲测可用,免费下载
03-13
公司要把大华摄像头集成到网页上预览,海康的有现成的sdk开发工具,大华的没有,只能网上一个个找.通过调用大华的plugin实现的摄像头控制,兼容IE11亲测可用,内涵demo,只需要安装webplugin.exe,之后重启浏览器即可.文件内包括使用说明,示例代码,开发文档.
webpack.config.js配置文件
06-19
最近刚学的webpack3.0，从零到一套相对比较齐全的配置
前端工程化---4.webpack生成预览页面
weixin_40820100的博客
01-26 225
起因 配置好webpack之后，启动项目打开localhost:8080打开的是如下页面，需要点击下方的按钮才能打开对应页面 原因 项目在启动时，在 根目录找不到index.html页面 解决办法 使用html-webpack-plugin插件进行配置 运行npm install html-webpack-plugin -D命令，安装生成预览页面的插件 修改webpack.config.js 文件头部区域，添加如下配置信息: //导入生成预览页面的插件，得到一个构造函数 const Htmlwebpa
Webpack：HTML Webpack Plugin插件
热门推荐
席木木的博客
01-18 1万+
Webpack：HTML Webpack Plugin插件，介绍Webpack前端项目中该插件的引入、配置和注意事项。
配置 html-webpack-plugin 生成预览页面||配置自动打包相关的参数
qq_39368007的博客
04-17 379
配置 html-webpack-plugin 生成预览页面 ① 运行 npm install html-webpack-plugin –D 命令，安装生成预览页面的插件 ② 修改 webpack.config.js 文件头部区域，添加如下配置信息： // 导入生成预览页面的插件，得到一个构造函数 const HtmlWebpackPlugin = require('html-w...
使用`html-webpack-plugin`插件配置启动页面
dieeming9110的博客
08-26 359
由于使用`--contentBase`指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性，所以推荐大家使用`html-webpack-plugin`插件配置启动页面.1. 运行`cnpm i html-webpack-plugin --save-dev`安装到开发依赖2. 修改`webpack.config.js`配置文件如下：```...
Webpack3.x 中 html-webpack-plugin的用法
Stan的专栏
11-23 3367
继上篇webpack 入门，安装与配置完后，是时候去把这些绑定好的file放到html中使用，使用!+tab，快速在一个.html文件中创建一个模板(index-manual.html)：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width
webpack（import路径配置）（自动打开浏览器）（自定义运行命令）
HeMister的博客
03-20 1894
Webpack实战：详析html-webpack-plugin配置与用法
在Webpack配置文件（webpack.config.js）中引入并配置html-webpack-plugin。最基本的用法是在`plugins`数组中添加一个新的htmlWebpackPlugin实例，如下所示： ```javascript const path = require('path'); const ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值