Содержание

Установка

Установка webpack

Официальный сайт https://webpack.js.org/

1. Создаем папку проекта.

2. Инициализируем проект:

npm init

3. Устанавливаем webpack:

npm install -D webpack webpack-cli

4. В корне проекта создаем файл webpack.config.js

5. Минимальная конфигурация для запуска Webpack

const path = require('path');  // модуль для работы с путями

module.exports = {
  mode: 'development', // режим работы
  entry: './src/index.js',  // точка входа
  output: { // объект
    filename: 'bundle.js',  // выходной файл
    path: path.resolve(__dirname, 'dist')  // директория для хранения 
  }
}

6. Запускаем Webpack

./node_modules/.bin/webpack

7. Подключение нескольких точек входа

const path = require('path');  // модуль для работы с путями

module.exports = {
  mode: 'development', // режим работы
  entry: { // создается как объект
    main: './src/index.js',
    analytics: './src/analytics.js'
  },  // точка входа
  output: { // объект
    filename: '[name].[contenthash].js',  // выходной файл - патерн для генерирования уникального имени файла
    path: path.resolve(__dirname, 'dist')  // директория для хранения
  }
}

8. Устанавливаем плагин для работы с html

npm install -D html-webpack-plugin

9. Подключаем плагин в конфигурации. В начале файла добавляем строку

const HTMLWebpackPlugin = require('html_webpack_plugin');

В конфигруацию добавляем подключение плагинов

plugins: [
    new HTMLWebpackPlugin(
      {
        title: 'Webpack',  // передача параметров
        template: template: './src/index.html' // шаблон для генерирования html
      }
    )
  ]

10. Устанавливаем плагин для очистки папки dist

npm install -D clean-webpack-plugin

Подключаем его в начале конфигурации

const {CleanWebpackPlugin} = require('clean-webpack-plugin');

Также подключаем его в плагинах

new CleanWebpackPlugin()

11. В файле package.json добавляем скрипты для автоматизации запуска

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

Для запуска сборки в режиме разработки используем команду:

npm run dev

Для запуска сборки в режиме production используем команду:

npm run build

12. Подключаем лоадеры для стилей

Предварительно установим нужные загрузчики

npm i -D style-loader css-loader

В файл конфигурации добавляем код:

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

А также в файл входа index.js добавляем строку для импорта css

import './styles/style.css'

13. Подключаем json

import json from '.assets/json';

14. Добавляем загрузчик для обработки статических файлов

npm i -D file-loader

15. Подключаем дополнительные библиотеки, например Normalize.css

npm install normalize.css

Подключаем библитеку в файл css

@import "~normalize.css";

Для защиты от случайной публикации пакета можно поменять в файле строчку

  "main": "index.js"

на

"private" : true

16. Добавление Bootstrap

npm install bootstrap

В файле index.js добавляем

import bootstrap from 'bootstrap';

В файл стилей импортируем стили bootstrap

@import 'bootstrap/dist/css/bootstrap.min.css';

17. Подключениеjquery

npm i -S jquery

Импортируем ее в файл index.js

import * as $ from 'jquery';

18. Для оптимизации файлов и избежания дублирования кода библиотек в разны точках входа можно использовать следующую настройку в файле конфигурации:

optimization: {
    splitChunks: {
        chunks: 'all'
      }
    },

19. Устанавливаем сервер для разработки:

npm install -D webpack-dev-server

В файл конфигурации добавляем код:

devServer: {
    port: 9000
  },

В package.json добавляем

"start": "webpack-dev-server --mode development --open"

Также в опциях нужно добавить

 runtimeChunk: 'single'

20. Для копирования файлов используем плагин

npm i -D copy-webpack-plugin

Подключаем плагин

const CopyWebpackPlugin = require('copy-webpack-plugin');

21. Для сохранения css в отдельном файле устанавливаем нужный плагин

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

Подключаем его в файл webpack.config.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

Также меняем строку

use: ['style-loader'

на

use: [ MiniCssExtractPlugin.loader,

А также добавляем плагин

new MiniCssExtractPlugin(
        {
          filename: '[name].[contenthash].css'
        }
      )

Для определения режима работы Node устанавливаем пакет для работы с разными операционными системами

npm i -D cross-env

В файле меням строку package.json

"dev": "cross-env NODE_ENV=development webpack --mode development",

В файле webpack.config.js добавляем строку

const isDev = process.env.NODE_ENV === 'development';

Добавляем код для настройки DevServer

devServer: {
    port: 9000,
    hot: isDev
  }

Команда clear очищает все содержимое консоли и папки dist

Для минификации html кода в проде добавляем настройку

new HTMLWebpackPlugin(
      {
        template: './index.html',
        minify:
          {
            collapseWhitespace: isProd
          }
      }

Для минификации css необходимо установть 2 дополнительных плагина

npm install terser-webpack-plugin --save-dev

и

npm install css-minimizer-webpack-plugin --save-dev

Подключаем плагины

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

Добавляем код

const optimization =() => {
  const config = {
      splitChunks: {
        chunks: 'all'
      },
      runtimeChunk: 'single'
    }

    if (isProd) {
      config.minimizer = [
        new CssMinimizerPlugin(),
        new TerserPlugin()
      ]
    }
    return config;
}

и меняем код оптимизации

optimization: optimization(),

Подключение Babel

npm install --save-dev babel-loader @babel/core
{
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
npm install @babel/preset-env --save-dev

Также добавляем в файл package.json

"browserslist": ">0.25%, not dead",
npm install --save @babel/polyfill

Добавляем настройку для devtool

devtool: isDev ? 'source-map' : '',