Loaders

Давайте поговорим о лоадерах.
В лоадерах будет то, что будет трансформировать ваш код с одного состояния в другое.

В этой статье будут рассмотрены 3 лоадера: css loader, sass/scss loader, babel

Начнём с css loader — более подробнее можно посмотреть по этой ссылке.

Для начала установим два модуля: style-loader, css-loader.

npm install --save-dev style-loader css-loader

Теперь нам нужно обновить файл webpack.config.js, вставив следующий кусок сразу после entry point:

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
     rules: [
       {
         test: /\.css$/,
         use: [
           'style-loader',
           'css-loader'
         ]
       }
     ]
   }
}

Здесь мы указали некоторые правила, в которых мы просим пройтись по файлам указанным в регулярке в свойстве test. В нашем случае, заканчивающихся на .css. Потом обработать эти файлы с указанными лоадерами. В нашем случае style-loader и css-loader.

Давайте протестируем, создав файл main.css в папке src/css.

Теперь зайдем в наш файл index.js, который находится в корне src и ипортируем в него наш css файл.

import './css/main.css';

Укажем в нём, например, background для body. И запустим webpack: npm run dev. Мы увидим, что таким образом наш css будет через js указан напрямую в html.

Теперь посмотрим пример с sass, для этого можно перейти по ссылке.

Установим модули для работы с sass.

npm install sass-loader node-sass webpack --save-dev

Теперь, после первого правила, вторым элементом массива вставляем правила для scss.

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
     rules: [
       {
         test: /\.css$/,
         use: [
           'style-loader',
           'css-loader'
         ]
       },
       {
           test: /\.scss$/,
           use: [
               {
                   loader: "style-loader"
               },
               {
                   loader: "css-loader"
               },
               {
                   loader: "sass-loader",
                   options: {
                       includePaths: []
                   }
               }
           ]
       }
     ]
   }
}

Теперь можем создать в нашем src папку scss и в ней заеблонить какой-нибудь scss файл.
И пропишем его в нашем index.js файле.

import './scss/main.scss';

При данном подходе это всё инжектится (inject) в наш javascript файл.

babel

Сейчас рассмотрим, как нам подрубить babel.

Здесь можете посмотреть как установить бабель через webpack с официального источника.

Нам нужны модули babel-loader, babel-core.

Теперь опять идём в наш webpack.config.js и добавляем новое правило.

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
     rules: [
       {
         test: /\.css$/,
         use: [
           'style-loader',
           'css-loader'
         ]
       },
       {
           test: /\.scss$/,
           use: [
               {
                   loader: "style-loader"
               },
               {
                   loader: "css-loader"
               },
               {
                   loader: "sass-loader",
                   options: {
                       includePaths: []
                   }
               }
           ]
       },
       {
           test: /\.js$/,
           exclude: /node_modules/,
           loader: 'babel-loader'
       }
     ]
   }
}

Также нам нужно создать в нашей корневой папке файл .babelrc.

У бабеля много разных преднастроек. И здесь мы можем сконфигурировать, какие пресеты мы сделаем доступными.

Для начала нам нужно установить babel-preset-env.

npm install babel-preset-env -D

В файле .babelrc запись ведется в json формате.

Вот тестовая запись

{
    "presets" : ["env"]
}

Теперь давайте создадим папку js и создадим в ней файл например module.js.

В нём запишем

function one() {
    console.log("ONE");
}

function two() {
    console.log("TWO");
}

export {one, two};

И импортнем в index.js и сразу проверим, чтобы отработало, запустив наш вебпак

import {one, two} from './js/module';
one();
two();