webpack(二)

1.Loaders:
Loaders 通过使用不同的loader让webpack 通过调用外部的脚本或工具对各种各样的格式的文件进行处理。 比如分析JSON 文件并把它转换为JavaScript 文件；进行CSS 化处 理；说把下一代的JS 文件（ES6，ES7)转换为现代浏览器可以识别的JS 文件。

2.css loader & style loader:
webpack 提供两个工具处理CSS 样式表，二者组合在一起使你能够把样式表嵌入webpack 打包后的JS 文件中.
(1).css-loader将@import url(…) 的方法实现require() 的功能;
(2).style-loader将所有的计算后的样式加入页面中;
(3).npm install –save-dev style-loader css-loader;
(4).配置css加载器:

(5).在js中导入css:
(5.1).import “./css/a.css”;
(5.2).import”./css/b.css”;
(6)运行:npm start

3.CSS Module 模块化:
(1).Webpack对CSS 模块化提供了支持，在CSS loader 中进行配置后，可以把“modules”传递到所需要的地方，直接把CSS的类名传递到组件的代码中，且这样做只对当前组件有效，不必担心在不同的模块中具有相同的类名可能会造成的问题。

(2).module.ryles 配置

(3).创建css文件,导入css模块文件,并引用类名

(4).模块化后不在支持在css中import url导入,必须在根js直接导入

4.less-loader
安装:npm install –save-dev less-loader less
配置{
test:”/.less$”,
use:[“style-loader”,{loader:”css-loader”,
options:{importLoaders:1}
},
“less-loader”]
}
导入:import:”/css/test.less”;