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

当我尝试使用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.. 46

正如@silvenon在评论中所说:

你有安装文件加载器吗？

是的文件加载器已安装但已损坏,我的问题已通过重新安装解决.

npm install --save-dev file-loader

1> Moussawi7..：

---

正如@silvenon在评论中所说:

你有安装文件加载器吗？

是的文件加载器已安装但已损坏,我的问题已通过重新安装解决.

npm install --save-dev file-loader

---

对于那些想要使用[`url-loader`](https://github.com/webpack-contrib/url-loader)的人:你还必须安装[`file-loader`](https:// github. com/webpack-contrib/file-loader),所以运行`npm install --save-dev file-loader`.