webpack-file-loader的其它相关配置

需要注意的点

默认情况下 fileloader 打包之后生成的图片名称，就是文件内容的 MD5 哈希值来作为文件的名称，如果要想打包之后不修改图片的名称，保持图片原来的名称, 那么可以新增 fileloader 的其他的一些配置那就是例如：name: "[name].[ext]"

关于 fileloader 其他的相关配置可详见 fileloader 官方的: placeholders，fileloader 官方文档地址 fileloader

接下来，我将演示一下其他的配置如何配置如下，修改 webpack.config.js webpack的核心配置文件，修改 fileloader 的配置即可

options: {
    // 指定打包之后的文件名称
    name: '[name].[ext]',
}

经过 webpack 打包之后的效果图如下所示，关于使用自行把 HTML 文件拿进去引入打包之后的 js 文件即可查看效果

好了介绍了上面的配置我们在来看看其他的相关配置吧，默认情况下 fileloader 会将生成的图片放在到 dist 根目录下面，下图是因为我配置了打包之后的文件名称所以不叫做，dist，不配置默认叫做 dist

如果想要打包之后的图片放到指定目录下面, 那么可以新增一个配置如：outputPath: "images/"

options: {
    // 指定打包之后的文件名称
    name: '[name].[ext]',
    // 指定打包之后的文件存放目录地址
    outputPath: 'images/'
}

经过打包之后的效果图如下

继续，在来看看 fileloader 其他的相关配置，如果需要将图片托管到其它服务器, 那么只需在打包之前配置 publicPath: "托管服务器地址"即可，配置了之后打包出来的图片地址就会在前面加上，托管服务器的地址 + 打包之后的图片名称

options: {
    // 指定打包之后的文件名称
    name: '[name].[ext]',
    // 指定打包之后的文件存放目录地址
    outputPath: 'images/',
    // 指定托管服务器的地址(统一替换图片地址)
    publicPath: 'http://www.it6666.top/images/'
}

打包之后的效果如下图所示

我这个打印是在 index.js 输出了一下图片打包之后的内容，完毕了就介绍到这里