Webpack 入门四：loader 使用

一、简述

上一篇我们聊了 Webpack 入口并构建了一个采用 CommonJS 规范的模块，本篇来聊一聊利用 loader 加载 css 模块。

Webpack 把一切文件都看作模块，CSS 文件也不例外。但是 Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。

官方给我们提供了三种使用 loader 的方式，这里主要介绍内联模式和命令模式。下一节《Webpack 入门五：配置文件》介绍配置文件的方式。

接上一节的例子，我们要在页面中引入一个 CSS 样式文件 main.css, 在入口文件 main.js 将main.css 看成一个模块，然后用 css-loader 来读取它，再用 style-loader 把它插入到页面中。

新增 main.css

body { background: yellow; }

修改 main.js：

require("!style-loader!css-loader!./main.css") // 载入 main.css
document.write('这里是入口<br/><br/>');
document.write(require('./module.js'));

感叹号! 来将资源文件与loaders分开，使用多个loaders，应在所有的转换规则(loader)之前加上感叹号!

安装 loader：

$ npm i css-loader style-loader

重新编译打包，清除缓存刷新页面，就可以看到黄色的页面背景了。

$ webpack main.js app.js
$ http-server

可是，如果每次 require CSS 文件的时候都要写 loader 前缀，是一件很繁琐的事情。我们可以根据模块类型（文件扩展名）来自动绑定需要的 loader。

将 main.js 中的 require("!style-loader!css-loader!./main.css") 修改为 require("./main.css") ，然后执行：

$ webpack main.js app.js --module-bind 'css=style-loader!css-loader'

显然，这两种使用 loader 的方式，效果是一样的。