如何解决webpack 文件加载器复制文件
我正在使用 webpack,它是 file-loader + html-loader 将文件发送到我的输出目录中。它几乎按预期工作,因为它还会复制这些文件。
这是我的 webpack.config.js
文件的一部分:
module.exports = {
module: {
rules: [
{ test: /\.html$/,use: ["html-loader"] },{
test: /\.(jpg|png)$/,use: {
loader: "file-loader",options: {
name: "[name].[ext]",outputPath: "img",},],};
有一个小例子说明了我的输出目录的样子:
dist/
- img/
- img1.png
- img2.png
- ab0d12.png
- c3d612.png
- index.html
- bundle.js
带有散列名称的两个图像与 img/
目录中的图像重复。正如您在上面的示例中看到的,我什至没有将名称设置为散列,而且我也无法以任何方式打开重复文件。
我正在使用一些插件,例如 HtmlWebpackPlugin
或 CleanWebpackPlugin
,但我相信它们不会导致问题。
版本:
- webpack
5.28.0
- 文件加载器
6.2.0
- html-loader
2.1.2
解决方法
经过长时间的搜索,我遇到了 this SO 问题,这似乎与我的非常相似,但是,文件重复的原因不同。
在第 5 版中,webpack 引入了 Asset Modules 作为 raw-loader
、url-loader
和 file-loader
的替代品,现在默认运行:
资产模块是一种模块,它允许人们在不配置额外加载器的情况下使用资产文件(字体、图标等)。
每次 webpack 开始打包我的项目时,asset/resource
和 file-loader
同时运行并导致重复。
最终,为了解决我的问题,我所要做的就是从 file-loader
文件中删除 webpack.config.js
并将 output.assetModuleFilename
设置为我想要的输出目录。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。