webpack4使用html-webpack-plugin插件的使用

最新推荐文章于 2023-01-18 16:20:06 发布
最新推荐文章于 2023-01-18 16:20:06 发布
阅读量1.6k 收藏
点赞数
分类专栏： 前端 webpack4 文章标签： webpack4 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41210698/article/details/99576381
版权

手动创建一些文件夹和文件

用命令初始化

cnpm init -y

安装该练习所用到的依赖

cnpm install webpack webpack-cli html-webpack-plugin -D

目录结构如下


index.js

console.log("index在控制台打印")

print.js

console.log("print在控制台打印")

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

package.json

{
  "name": "webpack4-plugin",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": 
最低0.47元/天 解锁文章
山海皆可平，难平是人心
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack4+学习笔记：4. html-webpack-plugin 插件 与 clean-webpack-plugin 插件
weixin_44101052的博客
01-21 1994
html-webpack-plugin 插件 与 clean-webpack-plugin 插件 一、 html-webpack-plugin 插件 作用：将 html 打包到 dist 下可以产生自动引入生产的js 1. 安装 //终端输入 npm install html-webpack-plugin -D 查看 package.json 显示已安装成功 （2）webpack.config...
2024年Web前端最全拥抱webpack4，有效缩减构建时间57%+，不断提升自己创造溢价的能力
最新发布
2401_84411767的博客
05-05 643
全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库VUE组件库级组件封装-高复用弹窗组件},第一步升级webpack到4.39.3版本，遇到了报错…
webpack4 之html-webpack-plugin
Mo_Luffy的博客
12-24 1255
plugin是什么 plugin是用于扩展webpack的功能，各种各样的plugin几乎可以让webpack做任何与构建先关的事情。 plugin的配置很简单，plugins配置项接收一个数组，数组里的每一项都是一个要使用的plugin的实例，plugin需要的参数通过构造函数传入。 举个栗子 const HtmlWebpackPlugin = require('html-webpack-pl...
webpack4实战三--插件使用（html-webpack-plugin篇）
Locker的博客
11-01 771
因为在打包时，webpack默认只会打包js，也就是说，咱们打包出来的dist文件夹中只有js文件而已，并没有html啥的其他文件。 当我们想查看打包后的js文件是否可以使用的话，我们需要将html文件拷贝到dist目录下，然后在html文件中使用script标签引用打包好的js文件，步骤很是麻烦。 那么可以怎么简化这些操作，自然是使用插件咯，标题白写的不成。 进入正题： 一、找到对应功能的插件 有一个插件可以实现自动添加script引用到html文件的操作，html-webpack-plugin
webpack-upload-plugin:Webpack插件
05-13
webpack-upload-plugin介绍这是的插件。 主要目的是提供一个工具，用于将html（或其他语言的模板）中使用的js / css / img / font上传到cdn，然后将引用替换为相应的cdn url。环境要求节点> = 10.5.0安装npm i -D ...
html-webpack-externals-plugin：与html-webpack-plugin一起使用以使用预先打包的供应商捆绑包的Webpack插件
02-06
html-webpack-externals-plugin :police_car_light: 已淘汰 :police_car_light: 抱歉，该模块已不再维护，其功能已由jharris4， 和。 您可能会遇到问题，并且最近的Webpack项目尚未使用它。 与一起使用以使用...
webpack4-cdn-plugin:上传 webpack 资源到 cdn，允许重命名散列资源
05-31
webpack4-cdn-插件 将您的 webpack 生成的资产上传到 CDN，允许重命名/重新哈希。 要求和重要说明 Node 8+ （支持async/await ）是必需的推荐。 此插件尚未在Windows平台上进行测试。 此插件仅支持webpack@4 。 ...
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-...
webpack-deadcode-plugin：Webpack插件，用于检测未使用的文件和已使用文件中的未使用导出
02-06
$ npm install webpack-deadcode-plugin --save-dev 通过纱： $ yarn add -D webpack-deadcode-plugin用法该插件将向您的终端报告未使用的文件和未使用的导出，但这些都不属于您的webpack构建过程，因此，它不会使...
webpack4.x配置03：HtmlWebpackPlugin
kevin的博客
03-20 891
html-webpack-plugin 上一章我们在 dist 目录下创建了一个 index.html 文件，并且手动在里面引入了我们生成的 bundle.js 文件 这里需要知道，dist 整个文件夹和里面的内容，我们之前是没有手动创建的，这个是我们执行命令后，自动创建的，dist 目录属于构建目录，是我们源码的输出目录，我们希望里面的一切都是可以自动化的，包括 index.html 文件也能自...
pyqt5做界面 将程序打包成exe文件
Songerggggggg的博客
02-28 907
首先我们安装pyinstaller pip install pyinstaller 然后打开我们需要打包的py文件处的cmd，比如我想打包main.py文件 进入main.py所在目录下： 输入命令： pyinstaller -F main.py 等待几分钟之后，就打包完成了。 此时我们.py文件所在目录就会生成一个名为dist的文件夹 双击这个.exe文件就可以啦！ 但是此时是带控制台的，我们去掉控制台的方法如下： 我们发现所在目录下多了一个.spec的文件 我.
webpack4使用html-webpack-plugin插件
艺艺艺艺儿ya的博客
07-31 401
安装依赖 npm i webpack webpack-cli html-webpack-plugin -D webpack.config.js配置文件 const path = require('path') //导入htm-webpack-plugin插件 const htmlWebpackPlugin = require('html-webpack-plugin'); //这个配置文件初始就是一个js文件，通过node中的模块操作 module.exports = { //入口，表示要使用we
webpack4 配置
xiehanwei的博客
08-30 656
webpack4 出来也有一段时间了，研究了一下webpack的配置相关： 1.optimization.minimizer.TerserPlugin 插件代替了之前的uglifyjs-webpack-plugin插件 来做代码压缩和tree-shaking 推荐配置： new TerserPlugin({ terserOptions: { pa...
Webpack：HTML Webpack Plugin插件
席木木的博客
01-18 1万+
Webpack：HTML Webpack Plugin插件，介绍Webpack前端项目中该插件的引入、配置和注意事项。
webpack-plugin
前端御书房
06-04 382
Tapable暴露了tap、tapAsync和tapPromise方法，根据钩子的同步/异步方式选择一个方法注入逻辑tap：同步钩子。不能包含异步调用tapAsync：异步钩子，通过callback回调告诉webpack异步执行完毕tapPromise：异步钩子，返回一个promise告诉webpack异步执行完毕。
html-webpack-plugin插件学习
长歌如梦夜
07-20 284
Install Webpack 5 npm i --save-dev html-webpack-plugin Webpack 4 npm i --save-dev html-webpack-plugin@4 Options Name Type Default Description title {String} Webpack App html-webpack-plugin设置的title，需要结合模板一起使用 filename {String | Function} index.h
vue-cli@4中默认的html-webpack-plugin配置
热门推荐
huzhenv5的博客
01-19 1万+
本文章代码所用vue-cli的版本号为： @vue/cli 4.1.2 如何获取默认配置 配置vue.config.js 在项目根目录下创建vue.config.js文件，键入如下代码： const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { configureWebpack: confi...
webpack4和terser-webpack-plugin版本号
06-07
webpack 4.x.x 默认使用 terser-webpack-plugin 1.x.x 版本。如果你想使用更高版本的 terser-webpack-plugin，需要手动安装并在 webpack 配置中进行相应的修改。例如，如果你想使用 terser-webpack-plugin 4.x.x ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值