webpack与SPA实践之管理CSS等资源的方法(7)

File Loader

Instructs webpack to emit the required object as file and to return its public url.

通知webpack将引入的对象输出为文件并返回其公开资源路径。

配置

  module: {
    loaders: [
      {
        test: /\.(png|svg|jpe?g|gif)$/,
        loader: [
          'file-loader'
        ]
      }
    ]
  }

说明

当我们在js文件中import Image from '../images/test.png'或在CSS文件中url('../images/test.png')时，file-loader将处理该图片并在output.path目录下输出文件，然后将../images/test.png路径替换成该输出文件路径。

注，对于html中引用的图片，需要使用[html-loader]加载器处理(http://npm.taobao.org/package/html-loader)。

参数

emitFile: 是否输出文件；

name: 指定输出文件的文件名，有几个可用内置变量：

1. [name]: 引用资源的名称；
2. [path]: 引用资源的相对路径；
3. [ext]: 资源拓展名；
4. [hash]: 资源内容的hash值，默认使用md5算法计算得到，可以指定长度值，如[hash:7]表示返回hash值前7个字符；
5. [hashType:hash:digestType:length]: 指定hash值计算算法类型和摘要类型，及摘要长度，如sha512:hash:base64:7表示使用sha512加密算法计算hash值并且返回7个字符的base64编码字符

实例

在配置时可以指定参数：file-loader?name=[name].[ext]?[hash:8]或者以配置对象方式：

  {
    test: /\.(png|svg|jpe?g|gif)$/,
    loaders: [
      // 'file-loader?name=[path][name].[ext]?[hash:8]'
      {
        loader: 'file-loader',
        query: {
          name: '[path][name].[ext]?[hash:8]'
        }
      }
    ]
  }

对于CSS源代码：

  .wrapper {
    font-size: 18px;
    background: url('../images/test.png') no-repeat 0 0;
  }

输出CSS代码如下：

  .wrapper {
    font-size: 18px;
    background: url(assets/images/test.png?59427321) no-repeat 0 0;
  }

assets为output.publicPath指定值，images/test.png?59427321为配置文件中指定的name模板，在output.path目录下输出images/test.png，区别是，不会携带?后的参数。

另外，你也可以在js模板中这样使用：

<img src={imgSrc} />
 ...
import imgSrc from 'path/xxx.png';

Url Loader

你可能会发现前面并没有安装file-loader，因为有更好用的加载器url-loader，url-loader加载器是file-loader的升级版，他们唯一的不同之处在于：

url-loader可以通过limit参数指定一个尺寸值，加载器会对小于该值的资源处理返回一个Data URL，以base64的方式嵌入HTML或CSS，如url-loader?limit=65000；对于大于该尺寸的资源将使用file-loader处理并且传递所有参数。