Webpack - это сборщик модулей, который очень часто используется в последних приложениях JavaScript. Я считаю, что это отличный инструмент, если вы хотите быстро начать разработку с минимальной настройкой. Однако, когда я захотел стилизовать свое недавно созданное приложение, настройка усложнилась. Во-первых, я хотел скомпилировать SASS в CSS, а затем я хотел загрузить собственные шрифты. Мне потребовалось некоторое время, чтобы эта конфигурация заработала. Этим постом я хотел бы избавить вас от неприятностей в будущем и поделиться с вами своим опытом.
Это руководство основано на Webpack 2.
Шаг 0. Настройка
- Установите
Webpack
иbabel-loader
+babel-preset-es2015
, чтобы использовать ES2015 (мы будем использовать его в примере)npm install --save-dev webpack babel-loader babel-preset-es2015
- Создать файлы
html
иjs
- * В этом примере мы установим
babel-node
иwebpack-dev-server
для обслуживания html - никогда не используйте babel-node в производственной среде - Создайте простой файл конфигурации 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