問題描述

關(guān)于講require進(jìn)來的樣式是作為link標(biāo)簽的方式引入或者作為<style>的形式引入，webpack 中提供了extract-text-webpack-plugin可以將style中的css樣式抽離出來。

如果按照以下方式實(shí)現(xiàn)：

webpack打包部分代碼：{ test:/.LK.css$/, loader:'style-loader/url!file-loader?name=css/[name].[hash:8].css!autoprefixer-loader?browsers=last 5 versions', exclude:/node_modules/},{ test:/([^.][^L][^K]).css$/, //抱歉，正則寫的不是很嚴(yán)謹(jǐn) loader:'style-loader!css-loader!autoprefixer-loader?{ browsers: [’last 100 versions’] }', exclude:/node_modules/}

這樣，當(dāng)require以.LK.css結(jié)尾的css樣式時(shí)，就會(huì)以link的形式嵌入到頁面中，簡(jiǎn)單測(cè)試了一下這個(gè)方案是可以基本實(shí)現(xiàn)功能。因?yàn)閷?duì)webpack的研究不是很深入，所以想知道這樣的方案是否可以運(yùn)用到實(shí)際開發(fā)中？

問題解答

可以，尤其在 React / Vue 技術(shù)棧中可以作為必要的優(yōu)化手段引入。

提取 CSS 至靜態(tài)文件后，能夠比 JS-in-CSS 的方案節(jié)約一半左右的 parse 時(shí)間。這個(gè)插件同樣支持 Hash 后綴等功能，能力是足夠在生產(chǎn)環(huán)境中使用的。