需要注意的点
默认情况下 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
输出了一下图片打包之后的内容,完毕了就介绍到这里