Question

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

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

请注意，只有当我尝试使用相对路径加载背景图片时才会出现此问题。

这项工作很好：

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

导致问题：

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

这是我的项目结构

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

Answer 1

@silvenon在评论中说：

您是否安装了文件加载器？

是 文件加载程序 已安装但已损坏，我的问题已通过重新安装解决。

npm install --save-dev file-loader

Answer 2

我有完全相同的问题，以下修正了它：

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

Answer 3

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

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

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

谢谢！

Answer 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.
          }
        }
      }

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

4 个答案: