Webpack - это сборщик модулей, который очень часто используется в последних приложениях JavaScript. Я считаю, что это отличный инструмент, если вы хотите быстро начать разработку с минимальной настройкой. Однако, когда я захотел стилизовать свое недавно созданное приложение, настройка усложнилась. Во-первых, я хотел скомпилировать SASS в CSS, а затем я хотел загрузить собственные шрифты. Мне потребовалось некоторое время, чтобы эта конфигурация заработала. Этим постом я хотел бы избавить вас от неприятностей в будущем и поделиться с вами своим опытом.

Это руководство основано на Webpack 2.

Шаг 0. Настройка

  1. Установите Webpack и babel-loader + babel-preset-es2015, чтобы использовать ES2015 (мы будем использовать его в примере)
    npm install --save-dev webpack babel-loader babel-preset-es2015
  2. Создать файлы html и js
  3. * В этом примере мы установим babel-node и webpack-dev-server для обслуживания html - никогда не используйте babel-node в производственной среде
  4. Создайте простой файл конфигурации Webpack в корневом каталоге webpack.config.js и загрузите его с помощью webpack на стороне сервера.
# webpack.config.js
module.exports = {
    entry: [
        './example/index.js'
    ],
    output: {
        filename: 'bundle.js',
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/
        }
      ]
    }
};

# server/index.js
import WebpackDevServer from 'webpack-dev-server'
import webpack from 'webpack'
import webpackConfig from '../webpack.config'
new WebpackDevServer(webpack(webpackConfig), {
  contentBase: 'example/',  
  stats: {
    assets: true,
    chunks: false,
    colors: true,
    hash: false,
    timings: false,
    version: false
  }
}).listen(8080, 'localhost', () => {
  console.log('listening on localhost:8080')
})

После настройки структура каталогов должна выглядеть следующим образом:

Это коммит с изменениями, описанными на этом шаге - https://github.com/bognix/webpack-styles-example/commit/c5e01a7625c21095ac773d6d1e59b1ba6be97d08

Шаг 1. Загрузите стили

Установив базовую настройку Webpack, мы можем перейти к загрузке стилей. Создадим простой css файл в каталоге example.

Теперь нам нужно загрузить css файлов с помощью Webpack.

# webpack.config.js
module: {
      loaders: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          exclude: /node_modules/
      },{
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          }, {
            loader: 'css-loader'
          }
        ]}
      ]
    }

Мы добавили test для css файлов в массив загрузчиков. В приведенном выше коде мы используем два загрузчика - style-loader и css-loader.

Оба этих двух загрузчика должны быть установлены:

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

style-loader отвечает за создание тега <style> на странице, а css-loader отвечает за понимание css содержимого файла. Для размещения стилей на странице требуется объединение этих двух плагинов. Порядок, в котором применяются загрузчики, важен. Я рекомендую покопаться в документации загрузчиков, чтобы полностью понять их возможности - https://webpack.js.org/concepts/loaders/

Тестирования css файлов в конфигурации Webpack недостаточно для загрузки стилей. Webpack загружает только те файлы, которые используются. Чтобы сообщить Webpack, что файл необходим, его нужно импортировать в файл, объявленный как входной файл - example/index.js.

Достаточно одной простой строчки:

# example/index.js
import './styles.css';

Ссылка на коммит с этими изменениями - https://github.com/bognix/webpack-styles-example/commit/1feec0405a9ce64fa03596f7d3195f9dafaa5812?w=1

Шаг 2. Извлеките стили из пакета

Если используется шаг 1, стили применяются, но в виде встроенного тега style на странице. Учитывая, как работают браузеры, лучше загружать стили отдельным запросом, желательно в самом начале страницы.

Для этого мы будем использовать extract-text-webpack-plugin.

Для начала нам нужно установить плагин:

npm install --save-dev extract-text-webpack-plugin

Во-вторых, нам нужно использовать плагин в файле конфигурации webpack.

# webpack.config.js
import ExtractTextPlugin from 'extract-text-webpack-plugin';
const extractStyles = new ExtractTextPlugin({
    filename: 'bundle.css'
});
module.exports = {
    entry: [
        './example/index.js'
    ],
    output: {
        filename: 'bundle.js',
    },
    module: {
        loaders: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        }, {
            test: /\.css$/,
            use: extractStyles.extract({
                use: 'css-loader'
            })
        }]
    },
    plugins: [
        extractStyles
    ]
};

Вверх файла импортируем плагин. Затем мы создаем экземпляр плагина. В качестве аргумента конструктора мы передаем конфигурацию - единственное, что нас сейчас интересует, это filename. Созданный css файл будет называться bundle.css. Затем мы модифицируем загрузчик css. Нам больше не нужен style-loader. Мы не хотим динамически вставлять тег thestyle на страницу. Вместо этого мы хотим иметь отдельный файл со стилями. Нам все еще нужно использовать css-loader, но теперь мы оборачиваем его с помощью плагина. Последняя часть - это регистрация плагина в поле plugins.

Когда создается bundle.css файл, нам нужно включить его в наш html файл.

# examples/index.html
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Webpack Example</title>
    <link rel="stylesheet" type="text/css" href="bundle.css">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

Коммит с изменениями с этого шага - https://github.com/bognix/webpack-styles-example/commit/0c67cda92ab27dc7cc9c4a3271c3f9d4a7062d59?w=1

Шаг 3. Скомпилируйте SCSS в CSS.

Вместо простого css мы хотим использовать Sass. Во-первых, нам нужно изменить файл styles.css на styles.scss.

Чтобы использовать Sass, нам нужно установить node-sass библиотеку, которая позаботится о компиляции Sass, и нам нужно установить sass-loader, чтобы Webpack мог загружать scss файл.

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

Теперь нам нужно использовать загрузчик в конфигурации Webpack.

# webpack.config.js
        ...
        }, {
            test: /\.scss$/,
            use: extractStyles.extract({
                use: [{
                    loader: 'css-loader'
                }, {
                    loader: 'sass-loader'
                }]
            })
        }]
        ...

Теперь вместо поиска css файлов нам нужно искать scss файла. Мы изменили аргумент, передаваемый плагину extractStyles - нужно использовать два загрузчика вместо одного. sass-loader используется для компиляции scss в css, а css-loader используется для загрузки css.

Последнее, что нам нужно изменить, это импорт в example/index.js - входной файл.

# example/index.js
import './styles.scss';

Фиксация с изменениями, описанными на этом шаге - https://github.com/bognix/webpack-styles-example/commit/aa372045d72b4a398a8441c35136da01e3a5df44

Резюме

Репозиторий github с кодом из этого поста - https://github.com/bognix/webpack-styles-example