javascript - webpack打包css檔案為link形式或為style形式方案評價?
PHP中文网
PHP中文网 2017-07-05 10:51:24
0
1
1008

關於講require進來的樣式是作為link標籤的方式引入或者作為<style>的形式引入,webpack 中提供了extract-text-webpack-plugin可以將style中的css樣式抽離出來。

如果按照以下方式實作:

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$/,  //抱歉,正则写的不是很严谨
                    loader:"style-loader!css-loader!autoprefixer-loader?{ browsers: ['last 100 versions'] }",
                    exclude:/node_modules/
        }
        



這樣,當require以.LK.css結尾的css樣式時,就會以link的形式嵌入到頁面中,簡單測試了一下這個方案是可以基本實現功能。因為對webpack的研究不是很深入,所以想知道這樣的方案是否可以運用在實際開發中?

PHP中文网
PHP中文网

认证0级讲师

全部回覆(1)
phpcn_u1582

可以,尤其在 React / Vue 技術堆疊中可以作為必要的最佳化手段引入。

提取 CSS 至靜態檔案後,能夠比 JS-in-CSS 的方案節約一半左右的 parse 時間。這個外掛同樣支援 Hash 字尾等功能,能力是足夠在生產環境中使用的。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板