6. file-loader加载资源

        file-loader 的作用是处理 import/require() 方式引入的一个文件资源，并且会将它打包到输出的文件夹中。

安装：npm install file-loader -D

import "./index.css"
const element = document.createElement("div")
element.style.width = 200 + "px"
element.style.height = 200 + "px"
element.className = "box"
document.body.appendChild(element)

index.css

.box {
    background-image: url("./test.jpg")
}                  

文件的名称规则

常用的placeholder：

• [ext]： 处理文件的扩展名
• [name]：处理文件的名称
• [hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）
• [contentHash]：在file-loader中和[hash]结果是一致的（在webpack的一些其他地方不一样，后面会讲到）
• [hash:<length>]：截图hash的长度，默认32个字符太长了
• [path]：文件相对于webpack配置文件的路径

            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: [{
                    loader: "file-loader",
                    options: {
                        name: "img/[name].[hash:8].[ext]"
                    }
                }]
            }

设置文件的存放路径

outputPath:

            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: [{
                    loader: "file-loader",
                    options: {
                        name: "[name].[hash:8].[ext]",
                        outputPath: "img"
                    }
                }]
            }