您好,登錄后才能下訂單哦!
這篇文章主要介紹了如何實(shí)現(xiàn)webpack打包時(shí)排除其中一個(gè)css、js文件或單獨(dú)打包一個(gè)css、js文件的方法,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
在項(xiàng)目中經(jīng)常會(huì)需要將一些接口的配合文件或者某些樣式文件,分離出來(lái)單獨(dú)打包,便于后期改動(dòng),這里我以css文件為例,介紹實(shí)現(xiàn)兩種方法:
項(xiàng)目目錄:
如上圖所示,現(xiàn)在我需要將項(xiàng)目中的scBtn.css文件單獨(dú)打包出來(lái)。在不做任何配置,直接打包出來(lái)的css文件是壓縮合并成了一個(gè)了,如下圖,當(dāng)我想要改某一個(gè)css文件時(shí)就不行了。
方法一:
1、在bulid文件夾下建一個(gè)copy.js(這個(gè)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', '復(fù)制成功--------' + obj.name); } copy(qurConfig);
2、在package.json文件中加入 "copy": "node build/copy.js"
3、在html文件中引入scBtn.css文件,這里需要放在下面,因?yàn)榉派厦娲虬腸ss會(huì)后引入會(huì)覆蓋前面的樣式
4、運(yùn)行 npm run bulid 打包完后再運(yùn)行 npm run copy
這時(shí)你就可以在scBtn中改樣式了。
方法二:
步驟一、步驟二如方法一所示。
3、在html文件中引入scBtn.css文件,這時(shí)你不要放在底部,因?yàn)榉椒ǘ乃悸肥窃诖虬衏ss文件時(shí)排除scBtn.css,不會(huì)有樣式覆蓋的問(wèn)題。
4、如下圖,你需要修改bulid文件夾下,utils.js文件中的styleLoaders函數(shù),加一個(gè)判斷條件,在extension為css時(shí)正則改成test: new RegExp("^((?!scBtn).)*.css$"),排除scBtn.css文件
5、運(yùn)行 npm run bulid 打包完后再運(yùn)行 npm run copy;就可以了
js文件也是按照此方法就好了
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“如何實(shí)現(xiàn)webpack打包時(shí)排除其中一個(gè)css、js文件或單獨(dú)打包一個(gè)css、js文件的方法”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。