Webpack：无法解析模块“文件加载器”

Posted 2023-02-22

【中文标题】Webpack：无法解析模块“文件加载器”

【英文标题】：Webpack: cannot resolve module 'file-loader'

【发布时间】：2016-03-25 00:05:46

【问题描述】：

当我尝试使用 webpack 构建 SASS 文件时，出现以下错误：

找不到模块：错误：无法解析模块“文件加载器”

请注意，此问题仅在我尝试使用相对路径加载背景图像时发生。

这个工作正常：

  background:url(http://localhost:8080/images/magnifier.png);

这会导致问题：

   background:url(../images/magnifier.png);

这是我的项目结构

图片 样式 webpack.config.js

这是我的 webpack 文件：

var path = require('path');
module.exports = 
    entry: 
        build: [
            './scripts/app.jsx',
            'webpack-dev-server/client?http://localhost:8080',
            'webpack/hot/only-dev-server'
        ]
    ,
    output: 
        path: path.join(__dirname, 'public'),
        publicPath: 'http://localhost:8080/',
        filename: 'public/[name].js'
    ,
    module: 
        loaders: [
            test: /\.jsx?$/, loaders: ['react-hot', 'babel?stage=0'], exclude: /node_modules/,
            test: /\.scss$/, loaders: ['style', 'css', 'sass'],
            test: /\.(png|jpg)$/, loader: 'file-loader',
            test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader: 'file-loader'
        ]
    ,
    resolve: 
        extensions: ['', '.js', '.jsx', '.scss', '.eot', '.ttf', '.svg', '.woff'],
        modulesDirectories: ['node_modules', 'scripts', 'images', 'fonts']
    
;

【问题讨论】：

css-loader 将每个url(...) 转换为require(...)，因此../images/magnifier.png 被/\.(png|jpg)$/ 测试选中。你有安装文件加载器吗？

@silvenon，感谢您的回复 file-loader 坏了，所以我重新安装了它，一切都会好起来的。谢谢

【参考方案1】：

正如@silvenon 在他的评论中所说：

你有安装文件加载器吗？

是的 file-loader 已安装但损坏，我的问题已通过重新安装解决。

npm install --save-dev file-loader

【讨论】：

对于那些想要使用url-loader的人：你还必须为它安装file-loader，所以运行npm install --save-dev file-loader。

如果我不想让 webpack 加载文件怎么办？我不需要 webpack 来检查图像是否真的存在于 dist 文件夹中。

谢谢！花了很长时间尝试修复类似的错误，其中 /node_modules/@ionic/core/dist/ionic/svg/index.js 在尝试运行单元测试时出现错误并且仅在使用 Ionic Platform 时发生

谢谢！安装后为我工作。

【参考方案2】：

我遇到了完全相同的问题，以下解决了它：

loader: require.resolve("file-loader") + "?name=../[path][name].[ext]"

【讨论】：

这看起来非常有用，但是我在将它映射到 webpack.config 和其他加载器配置时遇到了麻烦。你能提供一个更完整的例子吗？你的意思是这样吗？ test: /\.(png|jpg)$/, loader: require.resolve("file-loader") + "?name=../[path][name].[ext]"

嗨@Ihahne，你用过纱线吗？我有同样的问题，我只能用这个命令解决。但我不知道为什么。

【参考方案3】：

谢谢你 - 这是最后一件 Bootstrap、d3js、Jquery、base64 内联图像和我自己写得很糟糕的 JS 来玩 webpack。

回答上述问题以及解决问题的解决方案找不到模块：错误：无法解析模块“url” 编译引导字体时是

 
test: /glyphicons-halflings-regular\.(woff2|woff|svg|ttf|eot)$/,
loader:require.resolve("url-loader") + "?name=../[path][name].[ext]"

谢谢！

【参考方案4】：

如果您使用 url-loader 并定义了 limit 配置，您可能会遇到非常相似的问题。 As the documentation states，如果您尝试加载的资源超出此限制，则file-loader 将用作后备。因此，如果您没有安装file-loader，则会提示错误。要修复此错误，请将此限制设置为更大的值或根本不定义它。

      
        test: /\.(jpg|png|svg)$/,
        use: 
          loader: 'url-loader',
          options: 
            limit: 50000, // make sure this number is big enough to load your resource, or do not define it at all.
          
        
      

【参考方案5】：

如果您在运行 jest 时遇到此问题，请将其添加到 moduleNameMapper

"ace-builds": "<rootDir>/node_modules/ace-builds"