Webpack

16 Июля 2020 13:55

Установка

Создаем директорию проекта и устанавливаем указатель на эту директорию
Пусть это будет A:\OpenServer\domains\project.loc.
Инициализируем менеджер пакетов
```
npm init
```
Устанавливаем webpack.
```
npm i -D webpack webpack-cli
```

Настройка

Создаем файл конфигурации webpack.config.js в корне проекта

Помещаем в созданный файл этот код:

// webpack.config.js
const path = require('path')

module.exports = {
    entry: {
        main: path.resolve(__dirname, './src/index.js'),
    },
}

В коде мы определили точку входа как src/index.js. Создаем эту директорию и файл.
Добавим точку выхода в webpack.config.js.
Пусть это будет assets/public/dist.
Для этого модифицируем код добавив после entry следующее:
```
output: {
    path: path.resolve(__dirname, './assets/public/dist'),
    filename: '[name].bundle.js',
},
```
Добавляем команду для запуска в package.json в раздел scripts:
```
// package.json
"scripts": {
    "build": "webpack"
}
```
Теперь командой npm run build можно осуществлять сборку.

Установка необходимых плагинов

1. clean-webpack-plugin

Данный плагин очищает указанную директорию. В нашем случае, это папка dist/.

Команда установки - npm install --save-dev clean-webpack-plugin.

Добавляем следующий код в webpack.config.js:

// webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    plugins: [
        new CleanWebpackPlugin(),
    ],
}

В блоке module.exports = {} хранится много конструкций. Следовательно, если в plugins уже есть конструкции то новые добавляем через запятую.

2. Babel

Babel - инструмент для преобразования JS-кода с последними нововведениями в JS-код, совместимый со старыми браузерами.

Установка зависимостей Babel

babel-loader — транспиляция файлов с помощью Babel и вебпака
@babel/core — транспиляция ES2015+ в обратно совместимый JavaScript
@babel/preset-env — полезные стандартные настройки Babel
@babel/plugin-proposal-class-properties — пример кастомной конфигурации Babel (установка свойств экземпляров в теле класса, а не в его конструкторе)

Устанавливаем Babel со всеми зависимостями следующей командой:

npm add -D babel-loader @babel/core @babel/preset-env @babel/plugin-proposal-class-properties

Добавляем в webpack.config.js следующий код:

// webpack.config.js
module.exports = {
    // ...

    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },
        ],
    }
}

Благодаря этому коду, все зависимости из node_modules будут прогнаны через Babel.

Добавляем настройку плагина Babel.

Для этого нужно создать файл .babelrc в корнец проекта и положить в него следующий код:


{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

3. Обработка CSS

Плагины для CSS позволяет транспилировать код препроцессоров типа scss в код css, а также автоматически добавляет префиксы для flex и др.

Зависимости:

sass-loader — загружает SCSS и компилирует его в CSS
node-sass — Node Sass
postcss-loader — обработка CSS с помощью PostCSS
postcss-preset-env — полезные настройки PostCSS
css-loader — загрузка стилей
style-loader — применение стилей к элементам DOM

Устанавливаем следующей командой:

npm add -D sass-loader postcss-loader css-loader style-loader postcss-preset-env node-sass

Добавляем файл настроек postcss.config.js, как и для Babel и следующий код:

// postcss.config.js
module.exports = {
    plugins: {
        'postcss-preset-env': {
            browsers: 'last 2 versions',
        },
    },
}

Добавляем файл стилей в проект. Пусть это будет src/scss/index.scss.

Теперь необходимо импортировать этот файл в index.js

// index.js
import '~/scss/index.scss';

Также, устанавливаем mini-css-extract-plugin, чтобы настроить компиляцию scss в отдельную папку:

npm install --save-dev mini-css-extract-plugin

И добавляем настройки в webpack.config.js:

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
...

module.exports = {
    ...
    plugins: [
        new MiniCssExtractPlugin({
            filename: `css/[name].css`,
        }),
    ],
}

Окончательный вид файлов (webpack.config.js с небольшими доработками для удобства)

webpack.config.js

// webpack.config.js
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const PATHS = {
    src: path.join(__dirname, './src'),
    dist: path.join(__dirname, './assets/public/dist'),
    assets: 'assets'
}

module.exports = {
    externals: {
        paths: PATHS
    },
    entry: {
        main: `${PATHS.src}/index`,
    },
    output: {
        filename: `js/[name].js`,
        path: PATHS.dist,
        publicPath: `/`
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader'],
            },{
                test: /\.(scss|css)$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
                sideEffects: true,
            },
        ],
    },
    resolve: {
        alias: {
            [`~`]: PATHS.src,
        }
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: `css/[name].css`,
        }),
    ],
}

postcss.config.js

module.exports = {
    plugins: {
        'postcss-preset-env': {
            browsers: 'last 2 versions',
        },
    },
}

index.scss

@import "pages/main";

index.js

import '~/scss/index.scss';

Дерево проекта:


project.loc
--public
----dist
------css
------js
--src
----scss
------pages
--------main.scss
------index.scss
----index.js

Плагины для Webpack

Название	Описание	Команда
imagemin-webp-webpack-plugin	Конвертирует изображения png/jpg в webp и кладет их в директорию назначения
clean-webpack-plugin	Очистка директории	npm install --save-dev clean-webpack-plugin