webpack的css-loader到底有什么用？

Question

还有在JS文件中加载CSS有什么好处（妙处）呢？

 1 (function(){
 2     //引入公共CSS与页面CSS
 3     require('../../css/vendor/reset.css');
 4     require('../../css/page/index.css');
 5     
 6     //引入并创建多个独立slideModule模块
 7     var slideModule=require("../module/slide.js");
 8     new slideModule({dom:$('[node-type="iccAdvisorPicture"]')});
 9     new slideModule({
10         dom:$('[node-type="iccAdvisorPicture2"]'),
11         delay:4000,
12         duration:800
13     });
14 })();

1、感觉webpack都颠覆改变了传统JS写法

2、反而感觉生成的bundle.js代码臃肿

Answer 1

组件化方便，导入js文件的同时能够导入css文件

// ./Button.js
require('./Button.css');


// ./ComfirmButton.js
require('./Button.js');

还可以使用预编译器或css-module来避免命名空间混乱。

Answer 2

好处是：

• 方便组建化

• 使CSS Scope 成为可能

• 其他用途参考webpack-contrib/css-loader

重点是，Webpack把所有东西都看成是模块，这是Webpack设计原则之一。不管什么资源，都变成了可配置的，都通过loader，plugins配置，这样可想象空间就多了。

比如，如果你想要把css资源提取出来，不管你在什么地方require，import了，统统都提取出来，放到外部文件，供浏览器单独加载避免白屏闪动。点这里看做法