file-loader 学习

[Christian-Yang]

https://github.com/webpack-contrib/file-loader

file loader for webpack webpack的文件加载器

File Loader

Instructs webpack to emit the required object as file and to return its public url. 指示webpack将所需对象作为文件发出，并返回其公共URL。

Usage

By default the filename of the resulting file is the MD5 hash of the file's contents with the original extension of the required resource. 默认情况下，生成的文件的文件名是文件内容的MD5哈希值，并且具有所需资源的原始扩展名。

【重点在下面这里，就是这段代码】

var url = require("file-loader!./file.png");
// => emits file.png as file in the output directory and returns the public url
 这句话的意思是：把file.png作为一个文件，输出到output目录，并且require的返回值是这个
文件的公共的url见下面。注意，这个文件的名字已经从file.png变成了0dcbbaa701328a3c262cfd45869e351f，也就是通过文件内容计算出最后的生成的文件的名字】
// => returns i. e. "/public-path/0dcbbaa701328a3c262cfd45869e351f.png"

By default a file is emitted, however this can be disabled if required (e.g. for server side packages). 默认情况下，文件会被emitted到指定的文件夹，但是这个也可以被禁止的。

var url = require("file-loader?emitFile=false!./file.png");
// => returns the public url but does NOT emit a file
// => returns i. e. "/public-path/0dcbbaa701328a3c262cfd45869e351f.png"

Filename templates

You can configure a custom filename template for your file using the query parameter name. For instance, to copy a file from your context directory into the output directory retaining the full directory structure, you might use ?name=[path][name].[ext]. 您可以使用（查询参数名称）为文件配置（自定义文件名模板）。 例如，要将文件从上下文目录复制到保留完整目录结构的输出目录中，可以使用？name = [path] [name].[ext]。

By default, the path and name you specify will output the file in that same directory and will also use that same URL path to access the file. 默认情况下，您指定的路径和名称将在同一目录中输出文件，并且还将使用相同的URL路径来访问该文件。

You can specify custom output and public paths by using the outputPath, publicPath and useRelativePath query name parameters:

您可以使用outputPath，publicPath和useRelativePath查询名称参数来指定自定义输出和公共路径：

use: "file-loader?name=[name].[ext]&publicPath=assets/foo/&outputPath=app/images/"

useRelativePath should be true if you wish to generate relative URL to the each file context

如果您希望为每个文件上下文生成相对URL，则useRelativePath应为true

{
 loader: 'file-loader',
 query: {
  useRelativePath: process.env.NODE_ENV === "production"
 }
}

Filename template placeholders 文件名模板占位符

[ext] the extension of the resource   资源的扩展名
[name] the basename of the resource  资源的基本名字
[path] the path of the resource relative to the context query parameter or option.
          相对于上下文查询参数或选项的资源的路径。
[hash] the hash of the content, hex-encoded md5 by default
           内容的hash值，十六进制编码md5默认
[<hashType>:hash:<digestType>:<length>] optionally you can configure
other hashTypes, i. e. sha1, md5, sha256, sha512
other digestTypes, i. e. hex, base26, base32, base36, base49, base52, base58, base62, base64
and length the length in chars
[N] the N-th match obtained from matching the current file name against the query param regExp

Examples

require("file-loader?name=js/[hash].script.[ext]!./javascript.js");
// => js/0dcbbaa701328a3c262cfd45869e351f.script.js

require("file-loader?name=html-[hash:6].html!./page.html");
// => html-109fa8.html

require("file-loader?name=[hash]!./flash.txt");
// => c31e9820c001c9c4a86bce33ce43b679

require("file-loader?name=[sha512:hash:base64:7].[ext]!./image.png");
// => gdyb21L.png
// use sha512 hash instead of md5 and with only 7 chars of base64

require("file-loader?name=img-[sha512:hash:base64:7].[ext]!./image.jpg");
// => img-VqzT5ZC.jpg
// use custom name, sha512 hash instead of md5 and with only 7 chars of base64

require("file-loader?name=picture.png!./myself.png");
// => picture.png

require("file-loader?name=[path][name].[ext]?[hash]!./dir/file.png")
// => dir/file.png?e43b20c069c4a01867c31e98cbce33c9

[Christian-Yang]

webpack starter中的代码 webpack.common.js

/**
         * File loader for supporting images, for example, in CSS files.
         * 文件  loader  支持  images ,例如在css 文件
         */
        {
          test: /\.(jpg|png|gif)$/,
          use: 'file-loader'
        },

        /* File loader for supporting fonts, for example, in CSS files.
           文件  loader  支持  fonts ,例如在css 文件     
        */
        {
          test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/,
          use: 'file-loader'
        }