javascript - webpack打包css文件为link形式或者为style形式方案评价?
问题描述
关于讲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的研究不是很深入,所以想知道这样的方案是否可以运用到实际开发中?
问题解答
回答1:可以,尤其在 React / Vue 技术栈中可以作为必要的优化手段引入。
提取 CSS 至静态文件后,能够比 JS-in-CSS 的方案节约一半左右的 parse 时间。这个插件同样支持 Hash 后缀等功能,能力是足够在生产环境中使用的。
相关文章:
1. vim - docker中新的ubuntu12.04镜像,运行vi提示,找不到命名.2. javascript - vue生成一维码?求助!!!!!急3. angular.js - angularjs 怎么封装 upload 上传4. macos - mac下docker如何设置代理5. 绝对定位和fied定位,键盘弹起对布局的影响6. javascript - H5页面怎么查看console信息?7. nginx英文文档的WebSocket proxying部分没看太明白,麻烦推荐一点中文文章8. docker内创建jenkins访问另一个容器下的服务器问题9. angular.js - items.query is not a function这是怎么回事10. android 文件File删除问题
