详解webpack打包时排除其中⼀个css、js⽂件或单独打包⼀个css、js⽂件（两种⽅法）在项⽬中经常会需要将⼀些接⼝的配合⽂件或者某些样式⽂件，分离出来单独打包，便于后期改动，这⾥我以css⽂件为例，介绍实现两种⽅法：
项⽬⽬录：
如上图所⽰，现在我需要将项⽬中的scBtn.css⽂件单独打包出来。在不做任何配置，直接打包出来的css⽂件是压缩合并成了⼀个了，如下图，当我想要改某⼀个css⽂件时就不⾏了。
⽅法⼀：网站底部代码js特效
1、在bulid⽂件夹下建⼀个copy.js（这个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) {
console.log(' 1B[32m%s 1B[39m', '复制成功--------' + obj.name);
}
copy(qurConfig);
2、在package.json⽂件中加⼊ "copy": "node build/copy.js"
3、在html⽂件中引⼊scBtn.css⽂件，这⾥需要放在下⾯，因为放上⾯打包的css会后引⼊会覆盖前⾯的样式
4、运⾏ npm run bulid 打包完后再运⾏ npm run copy
这时你就可以在scBtn中改样式了。
⽅法⼆：
步骤⼀、步骤⼆如⽅法⼀所⽰。
3、在html⽂件中引⼊scBtn.css⽂件，这时你不要放在底部，因为⽅法⼆的思路是在打包所有css⽂件时排除scBtn.css，不会有样式覆盖的问题。
4、如下图，你需要修改bulid⽂件夹下，utils.js⽂件中的styleLoaders函数，加⼀个判断条件，在extension为css时正则改成test: new RegExp("^((?!scBtn).)*.css$")，排除scBtn.css⽂件
5、运⾏ npm run bulid 打包完后再运⾏ npm run copy；就可以了
js⽂件也是按照此⽅法就好了
总结
以上所述是⼩编给⼤家介绍的webpack打包时排除其中⼀个css、js⽂件或单独打包⼀个css、js⽂件，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。