详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)


Posted in Javascript onOctober 26, 2018

在项目中经常会需要将一些接口的配合文件或者某些样式文件,分离出来单独打包,便于后期改动,这里我以css文件为例,介绍实现两种方法:

项目目录:

详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)

如上图所示,现在我需要将项目中的scBtn.css文件单独打包出来。在不做任何配置,直接打包出来的css文件是压缩合并成了一个了,如下图,当我想要改某一个css文件时就不行了。

详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)

方法一:

1、在bulid文件夹下建一个copy.js(这个js名称可以自定义)

详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)

代码如下:

var fs = require('fs');
var path = require('path');

function resolve(dir) {
 return path.join(__dirname, '..', dir)
}
//origin要打包的css文件路径;target打包后的css文件路径
var qurConfig = {
 name: 'scBtn.css',
 origin: resolve('/src/assets/css/scBtn.css'),
 target: resolve('/dist/static/css/scBtn.css')
};

function copy(obj) {
 fs.createReadStream(obj.origin).pipe(fs.createWriteStream(obj.target));
 console.log('\x1B[32m%s\x1B[39m', '复制成功--------' + obj.name);

}
copy(qurConfig);

2、在package.json文件中加入 "copy": "node build/copy.js"

详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)

3、在html文件中引入scBtn.css文件,这里需要放在下面,因为放上面打包的css会后引入会覆盖前面的样式

详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)

4、运行 npm run bulid 打包完后再运行 npm run copy

详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)

这时你就可以在scBtn中改样式了。

方法二:

步骤一、步骤二如方法一所示。

3、在html文件中引入scBtn.css文件,这时你不要放在底部,因为方法二的思路是在打包所有css文件时排除scBtn.css,不会有样式覆盖的问题。

详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)

4、如下图,你需要修改bulid文件夹下,utils.js文件中的styleLoaders函数,加一个判断条件,在extension为css时正则改成test: new RegExp("^((?!scBtn).)*.css$"),排除scBtn.css文件

详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)

5、运行 npm run bulid 打包完后再运行 npm run copy;就可以了

js文件也是按照此方法就好了

总结

以上所述是小编给大家介绍的webpack打包时排除其中一个css、js文件或单独打包一个css、js文件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js实现的常用的左侧导航效果
Oct 17 Javascript
jQuery列表拖动排列具体实现
Nov 04 Javascript
js每隔5分钟执行一次ajax请求的实现方法
Nov 27 Javascript
jquery 图片缩放拖动的简单实例
Jan 08 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
jQuery之动画效果大全
Nov 09 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
three.js着色器材质的内置变量示例详解
Aug 16 Javascript
在nuxt中使用路由重定向的实例
Nov 06 Javascript
js自定义input文件上传样式
Oct 26 #Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
Oct 25 #Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 #Javascript
webpack4+react多页面架构的实现
Oct 25 #Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 #Javascript
代码整洁之道(重构)
Oct 25 #Javascript
Vue使用NPM方式搭建项目
Oct 25 #Javascript
You might like
mysq GBKl乱码
2006/11/28 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
PHP实现的Redis多库选择功能单例类
2017/07/27 PHP
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
使用JavaScript 实现的人脸检测
2015/03/24 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
使用Curl命令查看请求响应时间方法
2016/11/04 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
浅谈vue中慎用style的scoped属性
2017/11/28 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python读文件逐行处理的示例代码分享
2013/12/27 Python
Python常见数据结构详解
2014/07/24 Python
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
详解Python自建logging模块
2018/01/29 Python
django中send_mail功能实现详解
2018/02/06 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
python 中的paramiko模块简介及安装过程
2020/02/29 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
CSS3实现头像旋转效果
2017/03/13 HTML / CSS
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
学生党员公开承诺书
2014/05/28 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
运动会广播稿200字
2015/08/19 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python