Почему Webpack не использует loader, need an appropriate loader?

Question

[Andrey Dyrkov]

Написал конфиг для webpack

const webpack = require('webpack'),
           Notify = require('webpack-build-notifier'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
            clean = require('clean-webpack-plugin'),
           config = require('./config.json'),
              env = JSON.stringify(process.env.NODE_ENV);

// #Webpack Plugins

const plugins = [

  new webpack.NoEmitOnErrorsPlugin(),
  new webpack.optimize.CommonsChunkPlugin(config.webpack.commonChunkPlugin),
  new webpack.ProvidePlugin(config.webpack.providePlugin),

]

// #Webpack Rules

const rules = [
]


// # Webpack Loaders

const loaders = [

  {
    test:/\.js$/,
    loader:'babel-loader?presets[]=es2015,compact=false',
  },

  {
    test:/\.scss&/,
    loader:'sass-loader'
  },

  {
    test:/\.(png|jpg|svg|ttf|eot|woff|woff2)$/,
    include:__dirname+'/src/img/',
    use:[{loader:'file-loader',options:{name:'./build/img/[hash].[ext]',}}]
  }

]

// #Production build configuration

if(is('prod')){

  plugins.push(
     new clean(config.path.build.root, config.webpack.clean)
  );


  rules.push(

    //{test:''},{test:''}

  );

}


// #Development build configuration

if(is('dev')){

  // #Webpack plugins

  plugins.push(
    new clean(config.path.build.root, config.webpack.clean)
  )

}


// #Development configuration
if(is('watch')){

  plugins.push(
    new Notify(config.webpack.notify),
  )

}

// #Build mode function  @search {dev,prod,watch}

function is (search){

   const mode = env.substr(1,env.length-2);

  if(mode === search){
    return true;
  }

  return false;

}

// #Webpack export config

module.exports = {

  context: __dirname+'/'+config.path.source.root,

  entry: {
    index:'./js/index.js',
  },

  output:{
    path:__dirname+'/'+config.path.build.root,
    filename:'js/[name].js',
  },

  module:{
    loaders,
    rules,
  },

  plugins,

  devtool:is('prod') ? false: 'inline-source-map',

  watchOptions:{

    aggregateTimeout:100

  },

}

В entry файле index.js я подключаю sass файл

import '../sass/index.scss';

import '../img/hello.png';

Все лоадеры я подключил, всё скачено, всё в package.json присутствует.

Но всё же выдаёт ошибку, что нужен лоадер для данного файла



Не важно подключаю я картинку или sass файл, всё равно ошибка одна и таже, в чём проблема?

Answer 1

[Andrey Dyrkov]

Я нашёл решение, используя fast-sass-loader, в конфиге немного изменений

// #Webpack Plugins

const plugins = [

  new ExtractTextPlugin('style.css')

]

// #Webpack Rules

const rules = [

  {
    test:/\.(scss|sass)$/,
    use:ExtractTextPlugin.extract({
      use:['css-loader','fast-sass-loader']
    })
  }
]

Не понимаю почему чисто sass-loader не работает у меня. Данное решение компилирует sass в css и при этом намного быстрее чем sass-loader. Всем спасибо за ответы :)

Answer 2

[Константин Китманов]

include:__dirname+'/src/img/'
Лоадер сработает только для файлов, которые лежат в папке ./src/img/, а у вас он, судя по всему, лежит просто в ./img/.

Comments

[kulaeff]

Дополню: подобная ошибка в большинстве случаев говорит, что вы где-то накосячили с путями.

[Andrey Dyrkov]

Вот файловая структура проекта.



Есил бы webpack не нашёл бы файл scss or png он бы выкинул ошибку что не нашёл, но тут он пишет что нужен лоадер при том что я их прописал

[Константин Китманов]

Andrey Dyrkov, фантазии про то что вебпак не может файл найти -- сугубо на вашей совести:)
Просто уберите эту строчку из конфига и все заработает.

[Andrey Dyrkov]

Константин Китманов, Удалил я эту строчку, так же самая ошибка) У вас есть репозиторий webpack+sass+es16 можно react, я скачаю посмотрю, заработает у меня или нет)

[Константин Китманов]

Andrey Dyrkov, хм, у меня нигде png не используется, так хз, может и у меня неправильно они грузятся:)
Кстати, а зачем тут амперсанд? test:/\.scss&/,

[Andrey Dyrkov]

Константин Китманов, да это из примера npm пакета. Самое главное что лоадер для js файлов работает и всё чики пуки. А вот sass, картинки вообще ни в какую, скачал 2 проекта с инета, всё npm install и они туже ошибку выдают, а проекты пишут рабочие, типо boilerplate

[Константин Китманов]

Andrey Dyrkov, все-таки там должен быть быть $, потому что это символ конца строки в регулярках.

[Andrey Dyrkov]

Константин Китманов, переделал немного проект, в нем использовал просто css-loader и css файл, всё сработало, пути всё правильно, лишь только css-loader, изменил файл на scss и лоадер на sass-loader , снова так же сама я ошибка...