详解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 相关文章推荐
javascript+css 网页每次加载不同样式的实现方法
Dec 27 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
js有序数组的连接问题
Oct 01 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
Javascript的&&和||的另类用法
Jul 23 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
Bootstrap基本样式学习笔记之图片(6)
Dec 07 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
在vue中使用Autoprefixed的方法
Jul 27 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开发入门教程之面向对象
2006/12/05 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
PHP查询网站的PR值
2013/10/30 PHP
php调用自己java程序的方法详解
2016/05/13 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
javascript知识点收藏
2007/02/22 Javascript
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
2014/10/10 Javascript
JS使用cookie设置样式的方法
2016/06/30 Javascript
React简单介绍
2017/05/24 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
js实现轮播图特效
2020/05/28 Javascript
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python 类详解及简单实例
2017/03/24 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
python使用suds调用webservice接口的方法
2019/01/03 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
python获取交互式ssh shell的方法
2019/02/14 Python
详解python中@的用法
2019/03/27 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
python开发入门——列表生成式
2020/09/03 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
新闻传媒系求职信范文
2014/04/19 职场文书
模具专业自荐信
2014/05/29 职场文书
护士找工作求职信
2014/07/02 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL