Это продолжение части WebPack Часть-1, это часть-2 этой серии

Конфигурация — самая важная часть. 3 основная часть.

1. Требуется точка входа вашего проекта. По умолчанию точка входа ./src/index.js
2. Требуется вывод Точка вашего проекта. По умолчанию выходные данные создаются в формате ./dist/main.js. Он будет иметь мини-файлы.
3. После 2 шагов файлы оптимизируются для производства.

Для этого вы можете создать файл webpack.config.js в корневой папке.

Давайте начнем…

нам необходимо понять его Основные концепции:

Вход, Выход, Загрузчики, Плагины, Режим, Совместимость с браузером

Вход :

Запись определяет, откуда должен начинаться сборка веб-пакета.
По умолчанию его значение равно ./src/index.js, но вы можете указать другие ( точки входа, установив в webpack.config.js

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js',
};

Вывод :

Свойство Output указывает веб-пакету, где связывать файлы будет создаваться и как называть эти файлы. По умолчанию его значение равно ./dist/main.js.

output: {
path:____,
filename:_____,
}

The path property defines the path to the root of the project. 
The filename property defines the name of the output file.

webpack.config.js

const path = require('path');
module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

Погрузчики:

webpack понимает только файлы JavaScript и JSON. А загрузчики работают на уровне файлов во время или до >пакет создается.

webpack не понимает файлы .css, .scss или .ts. Тогда как мы будем связывать эти файлы?

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

Пример: позволяет связать файл CSS

css-loader — это модуль npm, который поможет веб-пакету собирать CSS из всех файлов css в вашем приложении и помещать его в строку.
style-loader возьмет выходную строку, сгенерированную вышеуказанным загрузчиком css, и поместит ее в теги ‹style› в файле index.html.
npm install css-loader style-loader — save-dev

  1. Свойство test определяет, какой файл или файлы следует преобразовать.
  2. Свойство use указывает, какой загрузчик следует использовать для преобразования.

webpack.config.js

const path = require('path');
module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
  module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
       ]
    },
};

В настоящее время единственное правило, которое у нас есть, содержит test:/\.css$/ и 'style-loader', 'css-loader' внутри массива
Что это значит? для любого файла, имя которого совпадает с регулярным выражением, указанным в свойстве test. Сначала используйте 'css-loader' для их компиляции, а затем используйте 'style-loader' для выходных данных css-loader и добавьте их в webpack.config.

Плагины:

Плагины похожи на загрузчики. Плагины расширяют функциональные возможности по умолчанию, которые включает Webpack.

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

Плагины.
Плагины работают на уровне пакета или фрагмента и обычно работают в конце пакета. процесс генерации.

Ссылки: Изображение[csso-webpack-plugin]

Есть множество доступных плагинов.

Пример: clean-webpack-plugin
clean-webpack-pluginПлагин webpack для удаления/очистки папки (папок) сборки. По умолчанию , этот плагин удалит все файлы внутри каталога output.path веб-пакета, а также все неиспользуемые ресурсы веб-пакета после каждой успешной сборки.

webpack.config.js

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

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

Режим:

устанавливает среду, в которой работает Webpack. Он может быть установлен на development, production или none. Значение по умолчанию — production.

module.exports = {
  mode: 'production',
};