javascript - Packt WebPack CSS-Dateien in ein Link-Format oder ein Style-Format?

Question

Der erforderliche Stil wird als Link-Tag oder in der Form <style> eingeführt. Webpack bietet das Extract-Text-Webpack-Plugin zum Extrahieren des CSS-Stils im Stil.

Bei Umsetzung wie folgt:

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/
        }
        

Wenn der erforderliche CSS-Stil mit .LK.css endet, wird er in Form eines Links in die Seite eingebettet. Nach einem einfachen Test kann diese Lösung die Funktion grundsätzlich realisieren. Da die Forschung zu Webpack nicht sehr tiefgreifend ist, würde ich gerne wissen, ob eine solche Lösung auf die tatsächliche Entwicklung angewendet werden kann?

Answer 1

可以，尤其在 React / Vue 技术栈中可以作为必要的优化手段引入。

提取 CSS 至静态文件后，能够比 JS-in-CSS 的方案节约一半左右的 parse 时间。这个插件同样支持 Hash 后缀等功能，能力是足够在生产环境中使用的。