详解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 相关文章推荐
form中限制文本字节数js代码
Jun 10 Javascript
JavaScript 学习历程和心得分享
Dec 12 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
js简单抽奖代码
Jan 16 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
jQuery 3 中的新增功能汇总介绍
Jun 12 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
Aug 23 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 Javascript
js实现弹幕墙效果
Dec 10 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
十大“创意”战术!
2020/03/04 星际争霸
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
php输出表格的实现代码(修正版)
2010/12/29 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
javascript中clone对象详解
2014/12/03 Javascript
JavaScript实现cookie的写入、读取、删除功能
2015/11/05 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
Angular进行简单单元测试的实现方法实例
2020/08/16 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
[03:49]辉夜杯现场龙骑士COSER秀情商“我喜欢芬队!”
2015/12/27 DOTA
python使用7z解压apk包的方法
2015/04/18 Python
python爬取网易云音乐评论
2018/11/16 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
python飞机大战游戏实例讲解
2020/12/04 Python
Django自带的用户验证系统实现
2020/12/18 Python
数据库方面面试题
2012/04/22 面试题
环保建议书作文
2014/03/12 职场文书
婚前协议书范本
2014/04/15 职场文书
党员查摆剖析材料
2014/10/10 职场文书
个人四风问题整改措施
2014/10/24 职场文书
反邪教警示教育活动总结
2015/05/09 职场文书
民事上诉状范文
2015/05/22 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS