html 多个插件,webpack中html-webpack-plugin插件的使用(生成多个html页面,引入不同的js文件)...
以html-webpack-plugin插件为例
1、先安装插件,在命令行中输入:npm i -D html-webpack-plugin(执行完之后,在package.js的devDependencies中就多了下面的代码
"html-webpack-plugin": "^3.2.0"
即安装了html-webpack-plugin插件
)
2、在配置文件中让插件生效,在module.exports={}对象中加入一个plugins字段,这个字段接收一个数组,也就意味着,可以给webpack应用很多各种各样的插件
先将插件引进来:
const HtmlWebpackPlugin = require('html-webpack-plugin');
由于插件可以携带参数/选项,你必须在 webpack 配置中,向 plugins 属性传入 new 实例。
plugins:[
new HtmlWebpackPlugin()//注意后面不要加分号,否则执行会出错
]
运行npm run dev 在dist中会自动生成一个index.html文件,并且这个html中自动引入了main.js(注意:这里的dev和main.js都是我们之前配置好的,根据你自己的设定可以不同,如果,还有疑问,可以看我之前写过的文章
https://mp.csdn.net/postedit/...),代码如下所示
如果我们有自己的html文件,里面已经有一些写好的结构,想要在这个文件的基础上加载打包后的main.js,我们只需要在配置里面指定一个参数(是一个对象),这个对象里面可以包含两个属性filename和template
filename:指定当我们打包好之后,新建的html文件的名字叫什么,如果不写的话,默认生成的是index.html
template:指定以哪个html为模板去创建
plugins:[
new HtmlWebpackPlugin({
filename:'first.html',//打包好后,新建的html名字为first.html
template:'./src/index.html'//以src下面的index.html为模板去创建新的html文件
})
]
打包好之后,在dist文件中就会自动生成一个first.html文件,并且,这个html文件中包含了index.html中的结构,并且,也会自动引入main.js文件
OK,就先写这么多,持续更新中……
更新:
html压缩输出:在插件配置文件中加入:minify;{
collapseWhitespace:true,//压缩空白
removeAttributeQuotes:true//删除属性双引号
}
生成链接消除缓存:
在插件配置文件中加入hash(bool):hash:true
在生成的html文件中加入自己的title:首先在插件配置文件中加入title:"名字",然后一定要记得在模板的title中加入下面的代码
想要生成多个html页面:filename,这个上面我们已经说到过,filename可以指定生成html文件的名字,那么这也就可以用来区分我们要生成的html页面,否则默认情况下生成的都是index.html,那么自然也就无法生成多个页面了,用法上面已经讲过了,就不再重复说了(注意,想要生成多个html页面,就要调用多次插件)
想要在生成的不同的html页面中引入不同的js文件,怎么做?很简单,只要在插件配置文件中加入:chunks:["入口文件名"],即可,如果不加的话,会在生成的html页面中引入所有的入口文件哦
看完整webpack配置文件代码(下面的是生成多个页面,引入不同的js文件)
webpack.config.js中的代码
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:{//入口文件
one:"./src/index.js",
two:"./src/main.js"
},
output:{//输出的文件
path:path.resolve(__dirname,'dist'),
filename:'[name].boundle.js'
},
mode:"development",
plugins:[
new HtmlWebpackPlugin({
template:'./src/one.html',
filename:'one.html',//生成的html页面的名字为one.html
title:"one",//它的title为one,记得要在src/one.html中加入
hash:true,
chunks:['one']
}),
new HtmlWebpackPlugin({
template:'./src/two.html',
filename:'two.html',
title:"two",
hash:true,
chunks:['two']
})
]
}
因为涉及到title的变化,所以也把两个模板html中的代码贴出来
one.html
two.html
嗯、是不是超级简单,其实这些在webpack的官网上都可以找到,附上链接,有兴趣的可以看看哦,而且官网巨详细滴
https://github.com/jantimon/h...
再稍微提一个,删除文件的插件吧,这个很简单,我就把步骤写一下,不做详细的扩展
插件:clean-webpack-plugin
1、下载:npm i -D clean-webpack-plugin
2、引入:在配置文件中引入,和上面的引入方式一样;const CleanWebpackPlugin = require('clean-webpack-plugin')
3、使用:new CleanWebpackPlugin(['dist'])//代表删除dist这个文件夹,当然也可以是其他的,很简单就不再说了
其实,插件嘛,只要一个会用了,其它的也就简单了,所以也就不再多提什么了,如果我觉得有必要的话,还会再写的
还有就是打字有点快,可能有的地方不小心打错了,还请大家海涵,如果发现并提出来那就更好了,还有一种可能,就是打的都对(哈哈),不过也不介意提出别的关于技术的意见,什么都行滴,互相学习互相进步
作者:冰雪为融
来源:CSDN
原文:https://blog.csdn.net/lhjueji...
版权声明:本文为博主原创文章,转载请附上博文链接!
html 多个插件,webpack中html-webpack-plugin插件的使用(生成多个html页面,引入不同的js文件)...相关推荐
- Webpack中Loader和Plugin的区别和编写思路
由于webpack基于发布订阅模式,在运行的生命周期中会广播出许多事件,插件通过监听这些事件,就可以在特定的阶段执行自己的插件任务 一.区别 前面两节我们有提到Loader与Plugin对应的概念,先 ...
- h5引入不同的js文件怎样让第二个js使用第一个js文件中的函数_px2rem-loader使用及注意事项...
1.安装lib-flexible.js: //基于vue-cli配置手淘的lib-flexible + rem,实现移动端自适应 2.安装px2rem-loader://使用 webpack 的 px ...
- React 组件js文件中如何引入其他的js 文件数组
在编写react 组件,特别是表格的过程中,我个人是最看不得,整个js文件感觉很多的内容,而且数组,函数,html代码都有,整体看起来分邋遢,我使用的是antd的Table 来渲染表格 我们看这样的一 ...
- 在一个js文件中引入另一个js文件
第一个js文件(被引入的js文件),文件名one.js,内容如下 function alertInOne(){ alert('in one'); } 第二个js文件,文件名two.js,内容如 ...
- IDEA中Free Mybatis plugin插件的使用
一.前言 Free Mybatis plugin是一款增强idea对Mybatis支持的插件,插件支持Mapper间快速跳转.语法错误提示.代码生成,使用可以一定程度上提高开发效率. 本项目使用的环境 ...
- android数据库插件,AndroidStudio中查看SQLite数据库插件
SQLScout,在 Android studio 内连接并操作 Android 设备上 sqlite 数据库. 特性 数据库结构浏览器 where you can connect to SQLite ...
- vue 引入json地图_vue中引入地图的js文件,显示echarts is not loaded
<script type="text/javascript"> var vue = new Vue({ el:'#app', data:{ function () { ...
- npm的插件如何直接在html中使用,webpack中html-webpack-plugin插件的使用(生成多个html页面,引入不一样的js文件)...
以html-webpack-plugin插件为例javascript 一.先安装插件,在命令行中输入:npm i -D html-webpack-plugin(执行完以后,在package.js的d ...
- vue mianjs 引用css_vue 学习记录八——webpack中常见的配置项
在web开发中,我们得使用到js(es6).css.html等技术,需要对资源文件管理,例如图片,同时还需要对性能.热加载等进行处理:这些功能都是可以在webpack中进行配置管理的,下面具体介绍说明 ...
最新文章
- 中国制造2025+互联网+,引领制造业发展
- R语言使用线性回归模型来预测(predict)单个样本的目标值(响应值、response)实战
- 我们生活在一个虚拟世界的概率有多大?
- mysql超时失效c3p0_解决c3p0和MySQL集成情况下,连接长时间闲置后重新使用时报错的问题...
- 关于linux LVM的好图 (Logic Volume Management,逻辑卷管理)
- jsp网站使用ffmpeg实现为.flv格式视频截图
- const 与 readonle 的异同
- 4 个拥有绝佳命令行界面的终端程序
- Java常用算法-二分查找算法(两种方法实现)
- Reactor 线程模型
- 微信小程序 audio 音频 组件
- word表格怎么缩小上下间距_word文档中表格怎么缩小行间距
- Android系统优化的那些年那些事
- css图片压缩不变形
- 武则天用无字碑深切蔑视男人
- 第四篇:服务发现机制
- 人工智能深度神经网络的研究
- 静态生存期和动态生存期
- 京东商城的商品分类代码
- win10 开启全局代理