详细说明是排除一个css和js文件 还是单独打包一个css和js文件(两种方法)

在项目中，经常需要分离一些接口匹配文件或一些样式文件，并分别打包以备以后更改。这里我以css文件为例介绍两种实现方法：

项目目录：

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

方法1:

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

代码如下：

var fs=require(' fs ')；var path=require(' path ')；函数resolve (dir) {returnpath。join (_ _ dirname，' .'，dir)}//origin是要打包的css文件路径；目标打包css文件var qurconfig的路径={name:' scbtn.css '，origin 3360 resolve('/src/assets/CSS/SCB TN . CSS ')，target : resolve('/dist/static/CSS/SCB TN . CSS ')}。函数副本(obj){ fs . createreadstream(obj . origin)。管道(fs . createwritestream(obj . target))；console . log(' \ x1b[32m % s \ x1b[39m]，'已成功复制-' obj . name)；}副本(Qurconfig)；2.将“copy”:“节点build/copy.js”添加到package.json文件中

3.将scBtn.css文件引入到html文件中，该文件需要放在下面，因为上面打包的css将被引入，并将覆盖以前的样式

4.打包后运行npm运行构建，然后运行npm运行复制

此时，您可以在scBtn中更改样式。

方法2:

步骤1，步骤二如如方法1所示。

3.把scBtn.css文件引入到html文件中，但是不要放在最下面，因为方法2的思想是在打包所有css文件的时候都要排除scBtn.css，这样就不会有样式覆盖的问题。

4.如下图所示，需要在bulid文件夹下的utils.js文件中修改styleLoaders函数，并添加一个判断条件。当扩展名为css时，它将被更改为test:new regexp('(？ScBtn)。)*.css$ ')，排除scBtn.css文件

5.运行npm run bulid，然后运行npm run copy包装后；就这样。

对于js文件，遵循这种方法会很好

摘要

以上是边肖介绍的webpack，排除一个css和js文件，或者单独打包一个css和js文件，希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！