2015-12-18 3 views
8

Когда я пытаюсь построить Sass файл с WebPack, я получил следующее сообщение об ошибке:Webpack: не может разрешить модуль «файл-загрузчик»

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

css-loader преобразует каждый 'url (...)' в 'require (...)', поэтому '../ images/magnifier.png' получает файл' /\.(png|jpg) $/'test. У вас установлен файловый загрузчик? – silvenon

+0

@silvenon, спасибо за ваш ответ *** file-loader *** был сломан, поэтому я его снова установил, и все будет отлично. Спасибо – Moussawi7

ответ

14

Как @silvenon сказал в своем комментарии: был установлен но разбитой

Do you have file-loader installed?

да файл-погрузчик , и моя проблема была решена путем ее повторной установки.

npm install --save-dev file-loader

+6

Для тех, кто хочет использовать ['url-loader'] (https://github.com/webpack-contrib/url-loader): вам также нужно установить ['file-loader'] (https://github.com/webpack-contrib/file-loader), поэтому запустите' npm install --save-dev file-loader'. – totymedli

+0

Что делать, если я не хочу, чтобы веб-пакет загружал файлы? Мне не нужен веб-пакет, чтобы проверить, действительно ли изображение существует в папке dist. – Kokodoko

2

Я имеет точно такой же вопрос и следующее установил его:

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

Это выглядит очень полезно, но мне трудно сопоставить его с webpack.config с другими конфигураторами загрузчика. Не могли бы вы предоставить более полный пример? Вы имеете в виду это? '{test:/\.(png | jpg) $ /, loader: require.resolve ("file-loader") + "? name = ../[path] [name]. [ext]"} ' – XML

1

Спасибо за это - это был последний кусок, чтобы получить Bootstrap, d3js, Jquery, base64 встроенные изображения и мой собственный плохо написанный JS, чтобы играть с webpack.

Чтобы ответить на этот вопрос выше и решение обойти проблемного
модуль не найден: Ошибка: Не удается разрешить модуль «URL» При компиляции начальной загрузки шрифтов был

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

Спасибо!