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

Question

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

Module not found: Error:Cannot resolve module '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']
    }
};

Answer 1

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

Do you have file-loader installed?

是 file-loader 已安装但损坏，我的问题已被 re-installing 解决。

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

Answer 5

如果您在运行开玩笑时遇到这个问题，请将其添加到 moduleNameMapper

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

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

Webpack: cannot resolve module 'file-loader'

sass

webpack