When I try to build SASS file with webpack, I got the following error:
Module not found: Error:Cannot resolve module 'file-loader'
note that this issue only happen when i try to load background image using relative path.
this Work fine:
background:url(http://localhost:8080/images/magnifier.png);
this cause the issue:
background:url(../images/magnifier.png);
and this is my project structure
- images
- styles
- webpack.config.js
and this is my webpack file:
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']
}
};
question from:
https://stackoverflow.com/questions/34352929/webpack-cannot-resolve-module-file-loader 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…