3-2 使用loader打包静态资源（图片）

1. 简介

本节介绍loader打包静态图片资源的一些配置。

2. file-loader打包图片配置

上一节我们成功打包并展示了一张图片。可是我们看到最终输出的图片名称是一串hash值，如果我们希望其展示的是原来的名称呢？可以进行如下配置：

    module: {
        rules: [{
            test: /\.(jpg|jpeg|png|gif)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]'
                }
            }
        }]
    }

运行打包命令后如图示：

运行打包命令后如图：

这里的[name]和[ext]都是占位符placeholders，含义如下：

image.png

我们也可以决定目标文件输出的位置：

    module: {
        rules: [{
            test: /\.(jpg|jpeg|png|gif)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'images/'
                }
            }
        }]
    }

可以看到图片的输出位置在images目录下。

image.png

3. url-loader打包图片配置

url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。
先安装：

cnpm i --D url-loader

然后将之前的file-loader改成url-loader，如下：

    module: {
        rules: [{
            test: /\.(jpg|jpeg|png|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]'
                }
            }
        }]
    }

运行后，发现没有图片显示：

image.png

这是为什么呢，原来图片被打包成了base64，而我们之前由于偷懒不想每次都手动拷贝一个index.html到build目录下。所以在图片路径前加了一个./build。现在将其改回：

import timg from './img/timg.jpeg';
export default function Content() {
    var dom = document.getElementById('root');
    var content = document.createElement('img');
    content.src = timg;
    dom.appendChild(content);
}

重新运行如下：

image.png

图片正常展示。这样的好处是减少了一次请求，坏处则是加大了js文件的体积。所以我们应该对打包成base64的图片大小做一个限制。如下：

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build'),
        publicPath: 'build/'
    },
    module: {
        rules: [{
            test: /\.(jpg|jpeg|png|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name].[ext]',
                    limit: 2048
                }
            }
        }]
    }
};

注意，我们此时额外增加了一个配置publicPath(点击查看publicPath的详细用法
)，用来指明静态文件的输出地址。这样，不管是打包成base64还是打包成文件都能正常显示。

image.png

参考

https://www.webpackjs.com/loaders/file-loader/
https://www.webpackjs.com/loaders/url-loader/