webpack | loader file-loader

对于图片等其他资源，我们一般使用file-loader进行处理，它实现的功能很简单。

• 将要加载的文件复制到指定目录
• 生成请求文件资源URL 具体配置如下

参考资料

• file-loader

安装

npm install file-loader --save-dev

使用

因为 webpack 打包只对 js 文件有效。

所以，如果你们在 index.html 引入后，是不会有作用的。所以，需要在 js 中引入。

我使用 ES6 的语法引入图片。

import img from "../../images/3.jpg"

const img_static = document.getElementById("img");
img_static.src = img;

file-loader 可以指定要复制和放置资源文件的位置，以及如何使用版本哈希命名以获得更好的缓存。此外，这意味着 你可以就近管理图片文件，可以使用相对路径而不用担心部署时 URL 的问题。使用正确的配置，webpack 将会在打包输出中自动重写文件路径为正确的 URL。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};

字体

{
    test: /\.(woff|woff2|eot|ttf|otf)$/i,
    loader: 'file-loader',
    options: {
        esModule: false,
        name: 'fonts/[name].[hash].[ext]'
    }
}

options

• esModule参数是表示是否使用es6模块的导出

其他

你可以看一下，和它相近的 url-loader。

• webpack | loader url-loader