Webpack: 无法解析模块'file-loader'

Question

当我尝试使用webpack构建SASS文件时，我遇到了以下错误：

找不到模块：错误：无法解析模块 'file-loader'

请注意，仅在尝试使用相对路径加载背景图像时才会出现此问题。

这个可以正常工作：

  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']
    }
};

- Moussawi7

---

css-loader会将每个url(...)转换为require(...)，因此../images/magnifier.png会被/\.(png|jpg)$/测试捕获。您是否已安装file-loader？ - silvenon

@silvenon，感谢您的回复。file-loader出了问题，所以我重新安装了它，现在一切都很好。谢谢。 - Moussawi7

Answer 1

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

你有安装file-loader吗？

是的，file-loader已经安装了，但是它出现了故障，通过重新安装解决了我的问题。

npm install --save-dev file-loader

- Moussawi7

---

对于那些想要使用 url-loader 的人：你还需要安装 file-loader，因此运行 npm install --save-dev file-loader。 - totymedli

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

谢谢！我花了很长时间试图解决类似的错误。当我使用Ionic平台运行单元测试时，/node_modules/@ionic/core/dist/ionic/svg/index.js文件出现了错误。 - OJ7

谢谢！我安装后它就对我起作用了。 - Giwoo Gustavo Lee

Answer 2

如果您正在使用配置了limit的url-loader，那么您可能会遇到非常相似的问题。正如文档所述，如果您尝试加载的资源超过此限制，则会回退到使用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.
          }
        }
      }

- Leonardo Kuffo

Answer 3

我有完全相同的问题，以下方法解决了它：

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

- lhahne

---

这看起来非常有用，但我在将其映射到webpack.config与其他加载器配置方面遇到了问题。您可以提供一个更完整的示例吗？您是指像这样吗？ {test: /\.(png|jpg)$/, loader: require.resolve("file-loader") + "?name=../[path][name].[ext]"} - XML

嗨@Ihahne，你用yarn了吗？我也遇到了同样的问题，只有通过这个命令才能解决。但我不知道为什么。 - hizmarck

Answer 4

感谢这个 - 这是最后一块拼图，可以让Bootstrap、d3js、Jquery、base64内联图像和我自己糟糕编写的JS与webpack配合使用。

回答上面的问题并解决遇到的问题
Module not found: Error: Cannot resolve module 'url' 编译Bootstrap字体时的解决方法是

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

谢谢！

- Ben White

Answer 5

如果您在运行jest时遇到此问题，请在moduleNameMapper中添加以下内容。

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

- Rishab Surana

Answer 6

Error - ./node_modules/@fortawesome/fontawesome-free/css/all.min.cssdisabled.
     Error: Module not found: Can't resolve 'url-loader' 

通过安装url-loader进行修复，例如：运行 'npm install url-loader --save-dev'

- Anonymous