详解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 相关文章推荐
jQuery中$.extend()用法实例
Jun 24 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
Bootstrap模块dropdown实现下拉框响应
May 22 Javascript
js HTML5 Canvas绘制转盘抽奖
Sep 13 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
vue-cli3中配置alias和打包加hash值操作
Sep 04 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
php实现上传图片生成缩略图示例
2014/04/13 PHP
php获取用户真实IP和防刷机制的实例代码
2018/11/28 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
jquery弹出层类代码分享
2013/12/27 Javascript
使用jQuery实现的掷色子游戏动画效果
2014/03/14 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
css与javascript跨浏览器兼容性总结
2014/09/15 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
理解JavaScript原型链
2016/10/25 Javascript
vue2中的keep-alive使用总结及注意事项
2017/12/21 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
微信小程序实现卡片层叠滑动效果
2019/06/21 Javascript
python批量修改文件名的实现代码
2014/09/01 Python
python黑魔法之参数传递
2016/02/12 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
NET程序员上机面试题
2015/05/23 面试题
软件测试工程师笔试题带答案
2015/03/27 面试题
美德少年事迹材料
2014/01/23 职场文书
总经理助理工作职责
2014/02/06 职场文书
网络编辑岗位职责
2014/03/18 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
中等生评语大全
2014/05/04 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
新党章的学习心得体会
2014/11/07 职场文书
客房领班岗位职责
2015/02/11 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang