Основы Webpack: часть 2

Основы Webpack: Часть 2

Во второй части исследования webpack мы продолжим базовую настройку и рассмотрим следующие темы:

Создание нескольких файлов
Организация приложения
Использование загрузчиков стилей и CSS
Изучение загрузчика изображений
Использование загрузчика SASS
Конфигурации режима
Использование плагина открытого браузера

Создание нескольких файлов

Есть два способа включить новые файлы javascript в пакет приложения.

Использовать импорт в основном или связанном файле javascript
Включить новый javascript в файл конфигурации webpack

Давайте изучим их по очереди:

Добавить новый скрипт в корневой каталог

touch script-2.js

содержание скрипта-2.js:

export function sayHello() {
  console.log('Hello from Script 2');
}

2. Включите скрипт в основной файл, в данном случае это script.js.

import { sayHello } from './script-2';
console.log('Hello Webpack World!');
sayHello();

вот результат:

Второй способ - настроить файл конфигурации Webpack.

Добавьте еще один файл javascript с именем script-3.js

touch script-3.js

script-3.js содержимое:

console.log('Hello from Script 3');

2. Обновите свойство записи в webpack.config.js.

...
entry: [
  './script',
  './script-3'
],
...

Организация приложения

Я ждал этого момента, потому что пока мы работали с беспорядком.

Создайте папку js и public в корневом каталоге:

mkdir js && mkdir public

2. Переместите все файлы javascript в папку js и index.html в общедоступную.

3. Добавьте в webpack.config.js базовый каталог (абсолютный путь!) Для разрешения параметра записи.

...
context: path.resolve('js'),
...

но не забудьте импортировать указанный выше модуль пути

let path = require('path');

4. Обновите свойство output в webpack.config.js

...
output: {
  path: path.resolve('build/js/'),
  publicPath: '/public/assets/js/',
  filename: "./bundle.js"
},
...

path: выходной каталог в виде абсолютного пути.
publicPath: указывает общедоступный URL-адрес выходных файлов при ссылке в браузере.

5. Обновите путь к сценарию пакета в index.html.

<script src="public/assets/js/bundle.js"></script>

6. Обновите свойство devServer contentBase:

...
devServer: {
  contentBase: 'public',
  port: 3001
},
...

После перестройки вы увидите, что теперь нам не хватает изображения и файла CSS, но не волнуйтесь, скоро приложение снова будет работать и даже лучше.

Использование стилей и загрузчика CSS

После реорганизации мы сломали наши отличные стили и теперь хотим их исправить. Для этого нам нужно использовать модуль style-loader и css-loader.

Установить стиль и загрузчик css

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

2. Настройте стиль и загрузчик css в webpack.config.js

...
module: {
  rules: [{
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
  }]
},
...

3. Удалите тег ссылки стиля из заголовка в index.html.

4. Создайте папку css в корневом каталоге.

mkdir css

5. Переместите файл style.css в css.

6. Импортируйте файл style.css в файл script.js.

import '../css/style.css';

Загрузчик изображений

Установите модуль file-loader и url-loader.

npm install file-loader url-loader --save-dev

2. Удалите все ненужные атрибуты из тега img.

<img id="img">

3. Добавьте новое правило в webpack.config.js

...
{
  test: /\.(png|jpg|gif)$/,
  use: [{
    loader: 'url-loader',
    options: {
      name: 'img/[hash]-[name].[ext]'
    }
  }]
}
...

4. Импортируйте изображение в файл script.js.

import webpackImg from '../img/webpack.png';

5. Установите атрибут изображения src.

let webpackElement = document.getElementById('img');
webpackElement.src = webpackImg;

6. Восстановите приложение.

Хорошо, вроде все работает как было до реорганизации

Использование загрузчика SASS

Теперь мы готовы к улучшениям!

Установите модуль sass-loader и node-sass

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

2. Создайте папку, в которой мы будем хранить файлы scss.

mkdir sass

3. Создайте файл main.scss в папке sass.

cd sass && touch main.scss

main.scss контент:

body {
  p {
    color: brown;
  }
}

4. Импортируйте файл main.scss в script.js сразу после style.css.

import '../sass/main.scss';

5. Настройте файл webpack.config.js, добавив новое правило для sass.

{
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader']
}

6. Восстановите приложение.

Новые стили работают должным образом.

Конфигурации режимов

Еще одна важная особенность - это работа с режимами. Если вы помните, с самого начала мы установили для свойства режима webpack значение «разработка», но у него также есть «производственный» режим.

Если режим установлен на разработку (как в начале), bundle.js выглядит нормально, но если он установлен на производство, то файл bundle.js будет некрасивым и уменьшенным. И это здорово, потому что нам не нужно создавать какую-то особую логику для обработки этих операций.

Использование плагина открытого браузера

Что оно делает? Он открывает новую вкладку браузера при загрузке Webpack. Очень полезно, если вы ленивы и не хотите заставлять себя открывать новую вкладку, когда Webpack готов к игре!

Установите модуль open-browser-webpack-plugin.

npm install open-browser-webpack-plugin --save-dev

2. Импортировать объект OpenBrowserPlugin.

let OpenBrowserPlugin = require('open-browser-webpack-plugin');

3. Добавьте его в список плагинов.

plugins: [
  new OpenBrowserPlugin({ url: 'http://localhost:3001/index.html' })
]

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

Заключение

Спасибо, ребята, что прочитали. Надеюсь, вам понравилось, и вы узнали что-то новое, связанное с JavaScript. Пожалуйста, подпишитесь и нажмите кнопку «Хлопок», если вам понравилась эта статья.

Основы Webpack: часть 2