Базовая настройка Webpack 2

4

Intro webpack

Для старта, нам нужно установить nodejs.

После этого в рабочей папке создаём package.json через команду npm init -y.
Теперь надо установить нужные нам пакеты. Начнем, конечно же, с webpack.

npm i webpack webpack-cli -D

Теперь в папке проекта создадим две папки dist и src.
В src (source) будут исходники, а в dist (distribution) — уже готовые файлы.

Создадим в src файл index.js, а в dist — index.html.

Теперь, чтобы использовать webpack — нам нужен его конфигурационный файл. Итак, создадим в корневом каталоге файл webpack.config.js.
Это конфигурационный файл вебпака, который он будет читать, и использовать все те вещи, которые в нём описаны.

Первое, что нам нужно сделать, это объявить константу path и зареквайрить в неё модуль path.

const path = require('path');

Он нужен для того, чтобы вебпак знал где находятся файлы.
Второе, нам нужно экспортировать объект, в котором будут описана конфигурация.
В нем мы указываем свойство entry — это точка входа, откуда начинается вся слежка. Всё проходит через эту точку.

Также нам нужна выходная точка (output point). Т.е. исходный код будет как раз таки в entry point, затем происходит «магия» и вебпак выплёвывает пережеванный и переваренный файл в output. В свойстве output нам нужно указать название готового файла. Например назовём его bundle.

Далее указываем path — это место, куда мы хотим сохранить наш готовый кодярник.

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }

}

В двух словах небольшой итог, entry — это наша точка вхождения, главный файл. А output — то место куда пойдёт уже обработанный файл.
Пропишем наш скрипт в index.html и теперь осталось только прописать скрипт запуска в package.json.

Там где указан параметр scripts укажем следующую конструкцию

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

You might also like More from author

Leave A Reply

Your email address will not be published.