#3 Сборщик модулей webpack. Разбираемся с css. Часть 3.

Всем привет! Сегодня мы с вами продолжаем изучать webpack. А именно - будем разбираться со стилями и с тем, как сделать стили модульными.

Для начала, давайте установим плагины

npm install style-loader --save

Этот плагин нам понадобится для того, чтобы webpack мог валидно работать с css. Второй плагин, который нам понадобится это css-loader

npm install css-loader --save

Эти два пакета нам нужны для того, чтоб webpack мог загрузить и распарсить css файлы.

Теперь нам необходимо добавить еще один loader в наш конфиг

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    resolve: {
        modulesDirectories: ['node_modules']
    },
    module: {
        loaders: [
            {
                test: /\.js/,
                loader: 'babel',
                exclude: /(node_modules|bower_components)/
            },
            {
                test: /\.css$/,
                loader: 'style!css'
            }
        ]
    }
};

В test мы пишем регулярку для того, чтобы webpack парсил css файлы. Поставим $, так как это будет конец выражения, хотя это, впринципе, не обязательно. И добавим loader: 'style!css'. Мы также могли бы полностью написать style-loader|css-loader, но webpack принимает и сокращенный вариант записи.

Теперь, давайте создадим файл main.css и запишем какие-то стили, например, в body

body {
    background: grey;
};

И, теперь подключим его в наш main.js

import '.main.css';

import _ from 'lodash';

console.log(_.isEqual(1, 2));

var obj = {
    field: 111,
    someFn() {
        console.log('someFn');
    }
};

obj.someFn();

Теперь, если пропишем в консоли

webpack

и посмотрим в браузер, то увидим что наш стиль применился и страница стала серой.

Теперь давайте поинспектим элементы. Как мы можем видеть - у нас в head добавился новый инлайновый style в котором прописан наш стиль для body. Это говорит о том, что все стили которые мы добавляем через импорты css - берутся из файлов css и вставляются на страницу инлайново. Это не всегда удобно, поэтому webpack позволяет также генерировать отдельный css файл и просто подключать его к index.html.

Также вы можете спросить: "А как же организовывать css, если, например, мы можем задать у одного модуля class для body - background: grey, а у другого - background: red и, этим самым, переопределить его?". Чтобы такого не возникло - я рекомендую вам использовать такой подход разработки в css как БЭМ методология. Это поможет вам делать код модульным и также это отлично сочетается с модульностью webpack.

Теперь давайте создадим отдельный css файл. Для этого нам нужно сделать несколько вещей. Во-первых, нам нужно поставить плагин

npm i extract-text-webpack-plugin --save

Данный плагин нам необходим для того, чтобы мы весь наш css смогли поместить в один файл bundle.css.

Теперь в файле конфига в самом верху пропишем

var ExtractTextPlugin = require('extract-text-webpack-plugin');

Теперь, заменим один из лоадеров, который мы описали ранее для файлов css на loader: ExtractTextPlugin.extract() и в качестве параметров передадим style-loader и css-loader

var ExtractTextPlugin = require ('extract-text-webpack-plugin');

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    resolve: {
        modulesDirectories: ['node_modules']
    },
    module: {
        loaders: [
            {
                test: /\.js/,
                loader: 'babel',
                exclude: /(node_modules|bower_components)/
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
            }
        ]
    }
};

Теперь, все что нам нужно - подключить сюда plugins, который будет представлять из себя дополнительный массив плагинов, которые мы хотим подключить к нашему webpack

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    resolve: {
        modulesDirectories: ['node_modules']
    },
    module: {
        loaders: [
            {
                test: /\.js/,
                loader: 'babel',
                exclude: /(node_modules|bower_components)/
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('bundle.css');
    ]
};

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

Запускаем в консоли

webpack

и как мы видим - у нас создался не только файл bundle.js, но и файл bundle.css. Если мы зайдем в файл bundle.css, то увидим, что он был сгенерирован из нашего файла main.css. Причем, что самое классное, если вы запустите в консоли

webpack --watch

и будете менять какой-то файл, например, внесем изменения в main.css

body {
    background: red;
};

то мы увидим в консоли, что оба файла сразу же перекомпилировались. И, если мы посмотрим в браузер сейчас, то увидим, что стили у нас не применились, так как не подключен css файл в index.html. Давайте его подключим

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="bundleƒ.css">
</head>
<body>
    ssss

    <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

Теперь, при обновлении браузера, мы увидим, что все стили подхватываются и цвет body стал красным. Мы можем поменять его обратно на grey. При этом вотчер у нас отработал и при обновлении страницы - мы увидим изменения.

Как мы видим, webpack легко работает с css и позволяет нам использовать для этого два подхода: инлайново добавлять стили, или генерировать файл и уже непосредственно с ним работать. Это достаточно удобно и, как мы видим, например, раннеры такие как grunt или gulp, при использовании webpack - особо не нужны, так как webpack вполне самодостаточен.