javascript - Does webpack package css files into link format or style format?

Question

Regarding the required style, it is introduced as a link tag or in the form of <style>. Webpack provides extract-text-webpack-plugin to extract the css style in style.

If implemented in the following way:

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

In this way, when the require css style ends with .LK.css, it will be embedded into the page in the form of a link. After a simple test, this solution can basically realize the function. Because the research on webpack is not very in-depth, I would like to know whether such a solution can be applied to actual development?

Answer 1

Yes, especially in the React / Vue technology stack, it can be introduced as a necessary optimization method.

After extracting CSS to static files, it can save about half the parse time compared to the JS-in-CSS solution. This plug-in also supports Hash suffix and other functions, and its capabilities are sufficient for use in production environments.