Настройка webpack + babel (yarn / npm)

Настройка webpack + babel (yarn / npm)

1. Необходимо установить node.js
2. Необходимо установить yarn

Генерируем файл package.json

Автоматическая генерация файла

//yarn
yarn init -y

//node.js
npm init -y

Ручная генерация с вводом параметров

//yarn команда
yarn init

//npm команда
npm init

Установка и настройка webpack

Локальная установка webpack

//С помощью npm
npm i webpack webpack-cli --save-dev

//С помощью yarn
yarn add webpack webpack-cli -D

После добавляем в файл package.json строки

 "scripts": {
    "build": "webpack",
    "dev": "webpack --mode development"
  },

Примерный вид того, что должно получиться (при использование yarn)

{
  "name": "< Название вашего проекта >",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "webpack",
    "dev": "webpack --mode development"
  },
}

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

Устанавливаем через командную строку

Команды для yarn

//file-loader обработчик файлов
yarn add -D file-loader

//babel это js компилятор, который позволяет перегонять новый синтаксис js в старый
yarn add -D babel-loader @babel/core @babel/preset-env

//html-webpack-plugin необходим для сборки html страниц
yarn add --dev html-webpack-plugin

//extract-text-webpack-plugin необходим для работы с css стилями
yarn add -D extract-text-webpack-plugin@4.0.0-beta.0

//copy-webpack-plugin копирует отдельные файлы или целые каталоги в каталог сборки
yarn add -D copy-webpack-plugin

//clean-webpack-plugin очищает папку сборки после генерации
yarn add -D clean-webpack-plugin

//style-loader
yarn add -D style-loader

//css-loader
yarn add -D css-loader

//sass-loader
yarn add -D sass-loader

//autoprefixer
yarn add -D autoprefixer

Команды для node.js

//file-loader обработчик файлов
npm i file-loader --save-dev

//babel это js компилятор, который позволяет перегонять новый синтаксис js в старый
npm i babel/core @babel/preset-env babel-loader --save-dev

//html-webpack-plugin необходим для сборки html страниц
npm i html-webpack-plugin --save-dev

//extract-text-webpack-plugin необходим для работы с css стилями
npm i extract-text-webpack-plugin@4.0.0-beta.0 --save-dev

//copy-webpack-plugin копирует отдельные файлы или целые каталоги в каталог сборки
npm i copy-webpack-plugin --save-dev

//clean-webpack-plugin очищает папку сборки после генерации
npm i clean-webpack-plugin --save-dev

//style-loader
npm i style-loader --save-dev

//css-loader
npm i css-loader --save-dev

//sass-loader
npm i sass-loader --save-dev

//autoprefixer
npm i autoprefixer --save-dev

Настройка конфига webpack

Необходимо создать файл webpack.config.js в корневой директории вашего проекта.

//объявляем переменные
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

//формируем настройки
module.exports = {
    entry: { main: './src/index.js' },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name].js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.scss$/,
                use: ExtractTextPlugin.extract(
                    {
                        fallback: 'style-loader',
                        use: ['css-loader', 'sass-loader']
                    })
            },
            //img loader
            {
                test: /\.(svg|png|jpe?g|)$/i,
                use: {
                    loader: "file-loader",
                    options: {
                        name: '../img/[name].[ext]',
                    },
                },
            },
        ],
    },
    plugins: [      
        new CleanWebpackPlugin(),
        new ExtractTextPlugin(
            {filename: 'css/style.css', disable: false, allChunks: true}
        ),
        new CopyPlugin([
            { from: 'src/img', to: 'img' },
        ]),
        new HtmlWebpackPlugin({
            inject: false,
            hash: true,
            template: './src/index.html',
            filename: 'index.html'
        }),        
    ]
};

Структура проекта

Структура сборщика проекта должна получится следующей

-Корневой каталог проекта

Недостающие файлы и папки необходимо создать

Запуск и тестирование сборщика проекта

Добавим код в src/index.html

<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<script src="css/main.js"></script>
</body>

В src/index.js добавим

import "./scss/main.scss";

Для сборки проекта в консоли прописываем

//для yarn
yarn build

//для npm
npm build

После выполненной команды в корневой директории появится папка dist со собранным проектом