Webpack 4.X 从入门到精通 - plugin(二)

本文详细介绍了Webpack 4.x中的plugins参数,通过html-webpack-plugin和clean-webpack-plugin两个插件的使用,展示了如何自动化生成HTML页面并清理构建目录,提高开发效率。
摘要由CSDN通过智能技术生成

通过上一篇文章,我们明白了webpack的两个配置参数入口与出口,webpack会找到入口文件的地址,进去后一顿蹂躏,再通过你给的输出地址就把编译后的文件给你了。这篇文章接着去丰富webpack.config.js的内容,说一个参数叫plugins

plugins

plugins里面放的是插件,在webpack里有各式各样的插件能够帮你完成任何构建的事情。只有你想不到的,没有它做不到的。并且全世界的小伙伴们都在给webpack贡献开源的插件,所以插件的种类是非常丰富的。

插件能做什么

插件的作用在于提高开发效率,能够解放双手,让我们去做更多有意义的事情。一些很low的事就统统交给插件去完成。比如在上一篇文章里讲到当webpack编译打包后,我们需要新建一个index.thml,以及在页面里通过script标签去引入生成的js文件,那这些傻瓜式的,浪费精力的事情就应该交给插件自动完成,这就是所谓的自动化。我们只需要关注功能如何实现、去做一些有意义的事件即可。

插件的难点不在于plugins参数如何去用,而在于插件本身如何去用。因为每个插件的功能不一样,所需的配置参数也不同。要用这个插件需要按它的要求来写参数,所以没有一套统一的规格,这就要求大家善于去看插件的API,通过webpack官网或者github都能找到插件说明。

html-webpack-plugin

下面就以这个html-webpack-plugin插件为例,给大家演示插件的用法。这个插件的作用是用来自动生成html页面,既可以生成单个页面又可以生成多个页面,并且在生成前你可以给它一堆的配置,它会按照你想要的生成方式去生成页面。

小试牛刀

第一步:安装

npm i html-webpack-plugin -D

第二步:在webpack.config.js里引入模块

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

第三步:在pluginsnew一个

plugins:[
 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陈学辉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值