Webpack

16 Июля 2020 13:55 (Редактировано: 11 Июня 2021 01:56)

Установка

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

Настройка

  1. Создаем файл конфигурации webpack.config.js в корне проекта
  2. Помещаем в созданный файл этот код:
    // webpack.config.js
    const path = require('path')
    
    module.exports = {
        entry: {
            main: path.resolve(__dirname, './src/index.js'),
        },
    }
  3. В коде мы определили точку входа как src/index.js. Создаем эту директорию и файл.
  4. Добавим точку выхода в webpack.config.js.
    Пусть это будет assets/public/dist.
     Для этого модифицируем код добавив после entry следующее:
    
    output: {
        path: path.resolve(__dirname, './assets/public/dist'),
        filename: '[name].bundle.js',
    },
  5. Добавляем команду для запуска в package.json в раздел scripts:
    // package.json
    "scripts": {
        "build": "webpack"
    }
  6. Теперь командой 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 и др.

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

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

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