webpack怎么把各个模块的css打包成一个 如何把bootstrap用webpack打包
webpack \u600e\u4e48\u5355\u72ec\u6253\u5305\u7b2c\u4e09\u65b9css\u5e93\uff0c\u6bd4\u5982normalize.css\u5176\u5b9e\u6709\u4e24\u79cd\u65b9\u6848\uff1a\u7b2c\u4e00\u79cd\u662f\u5c06 css \u6587\u4ef6\u5728 js entry \u4e2d\u6dfb\u52a0\u4f9d\u8d56\uff1b\u7b2c\u4e8c\u79cd\u76f4\u63a5\u8bbe\u7f6e css entry\u3002
\u7b2c\u4e00\u79cd\u65b9\u6848
// index.jsimport 'normalize.css';
...
// webpack config{ entry: { index: './index.js'
},
...
}
// outputindex.jsindex.css
\u8fd9\u79cd\u662f Webpack \u5b98\u65b9\u63a8\u8350\u7684\u65b9\u6848\uff0c\u4f46\u662f\u6bcf\u6b21\u90fd\u8981\u628a css \u653e\u5230 js entry \u4e2d\u624d\u53ef\u4ee5 extract \u51fa\u6765\u3002
\u7b2c\u4e8c\u79cd\u65b9\u6848\uff08\u76f4\u63a5\u8bbe\u7f6e css entry\uff09
\u9ed8\u8ba4 Webpack \u8bbe\u7f6e css entry \u9664\u4e86 extract \u51fa css \u6587\u4ef6\u8fd8\u4f1a\u591a\u4ea7\u751f\u4e00\u4e2a js \u6587\u4ef6\uff0c\u5176\u5b9e\u53ef\u4ee5\u5199\u4e2a Webpack \u63d2\u4ef6\u5c06\u5176\u5220\u9664\u5c31\u53ef\u4ee5\u4e86\u3002
# \u7b2c1\u6b65\u5b89\u88c5bootstrap-loader
npm install bootstrap-loader --save
# \u7b2c2\u6b65 \u5982\u679c\u4f60\u4f7f\u7528\u7684\u662fBootstrap3
npm install bootstrap-sass --save
#\u5982\u679c\u4f60\u4f7f\u7528\u7684\u662fBootstrap4
npm install [email protected] --save
# \u6211\u53d1\u73b0npm\u4e0b\u8f7d\u4e0d\u4e86bootstrap4,\u6240\u4ee5\u6211\u662f\u4ece\u7f51\u4e0a\u4e0b\u8f7d\u4e0b\u6765\u7684\uff0c\u7136\u540e\u653e\u5230
# node_modules\u4e0b\u7684,\u4e0b\u8f7d\u5730\u5740http://v4.bootcss.com/getting-started/download/
# \u7b2c\u56db\u6b65 \u5b89\u88c5\u5176\u4ed6\u6837\u5f0f\u5904\u7406loader
npm install css-loader node-sass resolve-url-loader sass-loader style-loader url-loader --save
# \u5982\u679c\u4f60\u4f7f\u7528\u7684\u662fBootstrap 4,\u53ef\u80fd\u4f1a\u9700\u8981
npm install postcss-loader --save
# \u6211\u7684\u63d0\u793a\u6ca1\u6709 flie-loader\uff0c\u6240\u4ee5\u6211\u5b89\u88c5\u4e86 flie-loader
npm install flie-loader --save
webpack.config.js配置如下
var ExtractTextPlugin = require("extract-text-webpack-plugin");//extract-text-webpack-plugin安装此插件
module:{
loaders:[
{test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")}
]
},
plugins:[
new ExtractTextPlugin("css/[name].css")//则会生成一个css文件
]
比如你的js文件中这样引入即可：
import './css/lib/bootstrap.min.css'
import './css/test.css';
绛旓細6.杈撳嚭璧勬簮锛氭牴鎹叆鍙ｅ拰妯″潡涔嬮棿鐨勪緷璧栧叧绯,缁勮鎴愪竴涓釜鍖呭惈澶氫釜妯″潡鐨 Chunk,鍐鎶婃瘡涓 Chunk 杞崲鎴愪竴涓崟鐙殑鏂囦欢鍔犲叆鍒拌緭鍑哄垪琛,杩欐鏄彲浠ヤ慨鏀硅緭鍑哄唴瀹圭殑鏈鍚庢満浼氥7.杈撳嚭瀹屾垚锛氬湪纭畾濂借緭鍑哄唴瀹瑰悗,鏍规嵁閰嶇疆纭畾杈撳嚭鐨勮矾寰勫拰鏂囦欢鍚,鎶婃枃浠跺唴瀹瑰啓鍏ュ埌鏂囦欢绯荤粺銆傚湪浠ヤ笂杩囩▼涓,Webpack 浼氬湪鐗瑰畾鐨勬椂闂...
绛旓細椤轰究瀵规枃浠跺仛涓浜涙枃鏈ˉ鍏呫佹浛鎹㈢瓑宸ヤ綔锛屼綘鐢 webpack 涓嶅悎閫傦紝鐢 gulp/grunt 鏇翠匠銆傝繖涓嶇畻瀹冪殑缂洪櫡锛岃屽睘浜 webpack 鏃犳硶鍙栦唬 gulp 鐨勫湴鏂广4銆 webpack 鐨勫叏灞缁熺浣垮緱浣犲彧鏀瑰姩涓涓枃浠堕噷鐨勪竴琛屼唬鐮侊紝涔熸槸鏁翠釜椤圭洰鍏ㄩ儴閲嶆柊鍒嗘瀽涓庣紪璇戯紝缁鍚勪釜妯″潡鍒嗛厤 webpack_id銆
绛旓細鐨剋atch锛屽彧鏈夋枃浠秏d5鍙樺寲鏃讹紝鎵嶄細閲嶆柊鎵撳寘锛屽苟涓斿彧parse鏈夊彉鍖栫殑鏂囦欢锛屽叾浠栨病鍙樺寲鐨勬枃浠舵槸浣跨敤缂撳瓨鐨勩傝繖鏍峰瓙锛屾墦鍖呮椂闂磋繀閫熼檷鍒200ms 浠ュ唴銆傚啀浼樺寲涓嬪幓鐨勮瘽锛屾垜浠鐭ラ亾webpack鎵撳寘鐨勮繃绋嬩腑鍋氫簡鍟ワ紝棣栧厛鏄В鏋愪緷璧栧暒锛岀劧鍚庡氨鏄鍚勭鍚鏍风殑loader銆備粠瑙ｆ瀽渚濊禆鐨勮搴﹀叆鎵嬶紝鎴戜滑鍙互bower install涓浜涙墦鍖呭ソ鐨...
绛旓細绛旀锛歐ebpack鏄竴绉嶆ā鍧楁墦鍖呭伐鍏凤紝涓昏鐢ㄤ簬灏椤圭洰涓殑鍚勭璧勬簮鎵撳寘鎴愭祻瑙堝櫒鍙瘑鍒殑闈欐佽祫婧愩傝webpack-dev-server鍒欐槸涓涓彁渚涗簡绠鍗晈eb鏈嶅姟鍣ㄧ殑灏忓伐鍏凤紝瀹冭兘鍦ㄥ紑鍙戣繃绋嬩腑瀹炴椂閲嶆柊鍔犺浇鏂囦欢銆Webpack妯″潡鎵撳寘宸ュ叿锛歐ebpack鏄竴绉嶉潤鎬佹ā鍧楁墦鍖呭櫒锛岀敤浜庡鐞嗗拰鎵撳寘JavaScript鍜屽叾浠栫被鍨嬬殑璧勬簮鏂囦欢銆傚畠鑳藉璇嗗埆...
绛旓細鏈瘒鏂囩珷涓昏浠嬬粛浜嗚瑙webpack鎻愬彇绗笁鏂瑰簱鐨勬纭Э鍔匡紝甯哥敤鐨勬彁鍙栫涓夋柟搴撶殑鏂规硶鏈変袱绉嶏紝鏈枃璇︾粏鐨勪粙缁嶄簡杩欎袱绉嶆柟娉曪紝鏈夊叴瓒ｇ殑鍙互浜嗚В涓涓嬫垜浠湪鐢╳ebpack鎵撳寘鏄椂鍊欙紝甯稿父鎯冲崟鐙彁鍙栫涓夋柟搴擄紝鎶婂畠浣滀负绋冲畾鐗堟湰鐨勬枃浠讹紝鍒╃敤娴忚缂撳瓨鍑忓皯璇锋眰娆℃暟銆傚父鐢ㄧ殑鎻愬彇绗笁鏂瑰簱鐨勬柟娉曟湁涓ょCommonsChunkPluginDLL...
绛旓細// 姣忎釜椤甸潰鐢熸垚涓涓猦tml var plugin = new HtmlWebpackPlugin({ // 鐢熸垚鍑烘潵鐨刪tml鏂囦欢鍚 filename: name + '.html',// 姣忎釜html鐨勬ā鐗堬紝杩欓噷澶氫釜椤甸潰浣跨敤鍚屼竴涓ā鐗 template: './template.html',// 鑷姩灏寮曠敤鎻掑叆html inject: true,// 姣忎釜html寮曠敤鐨刯s妯″潡锛屼篃鍙互鍦ㄨ繖閲屽姞涓妚endor绛夊叕鐢...
绛旓細/ include / exclude / resource 鍦ㄦ潯浠朵腑锛屽 issuer 杩涜鍖归厤鐨勫睘鎬ф湁 issuer 娉細褰撲娇鐢ㄥ涓潯浠跺睘鎬ф椂锛岄渶瑕佸悓鏃舵弧瓒筹紝褰撳睘鎬ф潯浠朵负鏁扮粍鏃讹紝婊¤冻鏁版嵁涓殑涓涓嵆鍙 鍙互瀵瑰尮閰嶈鍒欑殑妯″潡杩涜 搴旂敤loader 鎴栬 瑙ｆ瀽閫夐」瀵硅薄 oneOf?: RuleSetRule[]; rules?: RuleSetRule[];webpack閰嶇疆绀轰緥锛
绛旓細3.浣跨敤html-webpack-plugin鎻掍欢锛屽苟杩涜鐩稿簲閰嶇疆銆3.3.2 鎵撳寘鏍峰紡璧勬簮 涓嶅悓鐨勬牱寮忔枃浠堕渶瑕侀厤缃笉鍚岀殑loader 1.涓嬭浇loader锛2.閰嶇疆loader锛宑ss鏍峰紡鏂囦欢浣跨敤css-loader鍜宻tyle-loader锛宭ess鏂囦欢浣跨敤less-loader銆乧ss-loader鍜宻tyle-loader銆傚叾涓璫ss-loader鐨勪綔鐢ㄦ槸灏哻ss鏂囦欢鍙樻垚commonjs妯″潡鍔犺浇鍒癹s鏂囦欢涓紝...
绛旓細entry锛夊紑濮嬪伐浣滐紝閫氬父杩欎簺鏄疛avaScript妯″潡锛屽叾涓瓀ebpack寮濮嬪叾閬嶅巻杩囩▼銆傚湪姝よ繃绋嬩腑锛寃ebpack浼氭牴鎹姞杞藉櫒閰嶇疆璇勪及鏉＄洰锛坋ntry锛夊尮閰嶏紝杩欎簺閰嶇疆鍛婅瘔webpack濡備綍杞崲姣忎釜鍖归厤銆傝В鏋愭祦绋嬫潯鐩紙entry锛夋湰韬氨鏄竴涓ā鍧椼傚綋webpack閬囧埌涓涓潯鐩椂锛寃ebpack浼氬皾璇曚娇鐢ㄦ潯鐩殑resolve閰嶇疆灏嗘潯鐩笌鏂囦欢绯荤粺鍖归厤銆
绛旓細鎵撳寘鍦ㄤ竴璧锋槸涓轰簡鍑忓皯 request 鏁伴噺浠庤岃兘骞跺彂鏇村璇锋眰锛屾彁鍗囨讳綋鍔犺浇閫熷害锛屾墍浠ヨ噧鑲跨殑涓涓枃浠舵湰鏉ュ氨鏄洰鐨勮岄潪鍓綔鐢ㄣ傚鏋滆瑙ｅ喅璋冭瘯闂鍙互浣跨敤 Source Map銆 鎵璋撶殑浠ｇ爜鍒嗗壊锛岃鐧戒簡灏辨槸妯″潡鍒掑垎锛屾妸澶ф枃浠 breakdown 鐨勫悓鏃惰繕鑳借繘琛屼緷璧栫鐞嗭紝闄嶄綆寮鍙戝拰缁存姢鐨勬垚鏈紝鑰岃繖涓殑濂藉鏄綋鐜板湪寮鍙戞椂鑰岄潪...
