使用plugins让打包更便捷

之前运行dist下的js，都是手动把index.html拷贝过去的，每次把dist文件夹删除，都需要将index.html拷贝进去，这样很麻烦，我们在webpack官方插件中找到HtmlWebpackPlugin

module.exports = {
　　/*** 打包模式，不配置会警告，但底层还是会去配置默认的，就是production* production: 压缩模式，被压缩的代码* development: 开发模式，不压缩的代码**/mode: 'development',// 这个文件要做打包，从哪一个文件开始打包entry: './src/index.js',plugins: [new HtmlWebpackPlugin()],// 打包文件要放到哪里去，就配置在output这个对象里output: {// 打包好的文件名字filename: 'bundle.js',/*** 打包出的文件要把他放到哪一个文件夹下，path后面要放一个绝对路径* __dirname指的是webpack.config.js所在的当前目录的这个路径* 下面这个结合就是一个绝对路径*/path: path.resolve(__dirname, 'dist')}
}

这样配置好，再去打包，发现会自动生成一个index.html，

index.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Webpack App</title></head>
<body><script type="text/javascript" src="bundle.js"></script></body>
</html>

html里面还引入了bundle.js。而且在src里面我并没有这个index.html.这就是webpack里面插件的作用

HtmlWebpackPlugin这个插件能干什么呢？HtmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中

我们再打开index.html，发现网页上什么也没有。为什么呢？

我们看自己的代码逻辑

index.js

var root = document.getElementById('root');
import './index.scss';root.innerHTML = '<div class="iconfont iconfangdajing">abc</div>';

代码逻辑是找到id为root到节点，再把abc挂在到root上。但是我们看index.html并没有root这个标签。所以说明用webpack生成到这个html，少了一个id为root的标签。那我想让他自动生成这个id为root的标签，怎么办，可以对这个html-webpack-plugin做一个配置

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

然后在src里面自己写一个模版index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>html template</title></head><body><div id='root'></div></body>
</html>

然后运行npm run bundle，打开自动生成的html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>html template</title></head><body><div id='root'></div><script type="text/javascript" src="bundle.js"></script>　　</body>
</html>

可以惊讶的看到id为root的标签插入进去了。这是为什么呢？

html-webpack-plugin会自动生成一个html，这个html是以哪个模版生成的呢，是src下面的index.html为模板生成的。生成之后，会把打包出来bundle.js注入到html中。

通过这个例子，我们说明一下webpack中plugin的作用。

plugin可以在webpack运行到某个时刻的时候，帮你做一些事情。这个很像生命周期函数的定义。这个时刻是什么时刻呢，就是webpack打包结束的时刻。其它的插件也会在某些时刻做一些事情，比如刚打包的时刻。比如打包js的某个时刻。再举个例子。。

我们现在打包好的名字叫bundle.js，现在我改一下，叫做dist.js

output: {filename: 'dist.js',path: path.resolve(__dirname, 'dist')
}

然后重新打包，然后dist目录下会多出一个dist.js文件，html里面自动引入的也是dist.js文件。但是我们看bundle.js的文件依然存在，为什么呀，一个是我们刚才没有删除dist，再打包，但每次打包都需要删除一下，会很麻烦。我们希望每次打包的时候，自动将dist删除，这样就不会有上次遗留的东西了。现在就需要另外一个插件，在官网webpack下找不到，叫做clean-webpack-plugin

先安装

npm install clean-webpack-plugin -D

装好之后，我们去增加配置

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

这个意思是在打包之前先删除掉dist这个文件夹。这样运行npm run bundle，之前bundle.js就不在了。

转载于:https://www.cnblogs.com/wzndkj/p/10745406.html

使用plugins让打包更便捷相关推荐

基站位置查询系统_木牛导航网络基站服务免费了！——更便捷、更高效、更省心！...
布谷飞飞劝早耕,春锄扑扑趁初晴. 千层石树通行路,一带水田放水声. <山行>-- 姚鼐 (Photo by Quang Nguyen Vinh) 农业生产作为人类最传统的产业自古以来都讲 ...
更便捷的画决策分支图的工具_做出更好决策的3个要素
更便捷的画决策分支图的工具 Have you ever wondered: 您是否曾经想过: How did Google dominate 92.1% of the search engine ma ...
使用说明思迅收银系统_使用自助收银系统让消费者自助结算更便捷高效?
很多超市的人工收银台,在客流的高峰期,如节假日.活动促销时间段.周末等,结账慢且客流量大,容易出现顾客排长队等待结账的情况.这样会有结账慢.收银员收银压力大的影响,进而影响顾客的购物体验. 在超市使用 ...
Java 8 API Stream让List操作更便捷
Java8新增的API Strem(流),没用过的同学可能不知道它是做什么的,下面我们就来说说Stream给我们带来的好处,它能让我们更便捷的对集合做操作,以往我们在对集合做数据过滤,排序,数据聚合, ...
UI设计灵感|手机钱包App怎样设计才更便捷？
手机支付应该给用户带来的是方便和快捷,支付和财务管理等常用功能也该用最少的步骤来实现. 相信大多数人如今出门已经不带现金了,无现金生活为我们带来了巨大的便利,但众多的资产管理和理财类应用仍然在进行不断 ...
百度小程序如何引流？给用户带来了更便捷、更人性化的体验
百度小程序如何引流?给用户带来了更便捷.更人性化的体验百度小程序是百度官方最核心的业务,简单搜索核心词匹配,用百度APP打开,一个词只能一个人使用,如同我们的身份证一样,如果说这个词被别人使用了之后 ...
halcon学习实战系列—如何更便捷，更高效的计算同心度
如何更便捷,更高效的计算同心度 1.获取Contour 2.拟合圆 3.同心度计算首先,如何获取Contour,用前面专题讲的fit_circle_base_circle当然可以,直接将获取Cont ...
华为云服务器客户端,华为终端云服务带来全场景云体验让用户办公更便捷
华为终端云服务致力于为用户打造全场景.沉浸式的数字生活,华为终端云服务旗下的华为云空间为用户带来全场景云体验.华为终端云服务的华为云空间能够帮助用户提升工作效率,让办公更便捷. 华为云空间是什么? 手 ...
一年中重要的节日列表用日历便签分别记录浏览更便捷
2022虎年正月十五元宵节已经过去,在很多人的印象里,好像只有过了正月十五十六,这个年才算是真的过完了.在这十五天的时间里,人们陆续经历了春节.情人节和元宵节三个节日,接下来还会有植树节.清明节.劳动 ...
百度灵医智惠明星案例获人民日报点赞：智慧医疗让看病更便捷
北京市平谷区马坊镇社区卫生服务中心是一家典型的基层医疗机构,日均门诊量300人左右.虽然基层医院人手紧张,但这里忙而不乱.在人工智能临床辅助决策系统的帮助下,医生可以方便快捷地进行疾病查询.检查查询. ...

使用plugins让打包更便捷

使用plugins让打包更便捷相关推荐

最新文章

热门文章