上一篇Webpack入门之入口与模块, 我们聊了 Webpack 入口并构建了一个采用 CommonJS 规范的模块,本篇来聊一聊利用 loader 加载 css 模块。
Webpack 把一切文件都看作模块,CSS 文件也不例外。但是 Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。
Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果。这样,我们就可以通过 require 来加载任何类型的模块或文件,比如 CoffeeScript、 JSX、 LESS 或图片。
接上一节的例子,我们要在页面中引入一个CSS样式文件main.css, 在入口文件main.js将main.css看成一个模块, 然后用 css-loader 来读取它, 再用 style-loader 把它插入到页面中。
- css-loader使你能够使用类似@import 和 url(…)的方法实现 require()的功能
- style-loader将所有的计算后的样式加入页面中;
1
2/* main.css */
body { background: yellow; }
修改 main.js:
1 | require("!style-loader!css-loader!./main.css") // 载入 main.css |
安装 loader:
1 | npm i css-loader style-loader |
重新编译打包,清除缓存刷新页面,就可以看到黄色的页面背景了。
1 | $ webpack main.js app.js |
可是,如果每次 require CSS 文件的时候都要写 loader 前缀,是一件很繁琐的事情。我们可以根据模块类型(文件扩展名)来自动绑定需要的 loader。
将 main.js 中的 require(“!style-loader!css-loader!./main.css”) 修改为 require(“./main.css”) ,然后执行:
1 | $ webpack main.js app.js --module-bind 'css=style-loader!css-loader' |
显然,这两种使用 loader 的方式,效果是一样的。
附源码