Първи стъпки с Webpack [с примерния проект]

WebPACK е модул bundler което улеснява изграждането на сложни JavaScript приложения. Тя е натрупала сериозно сцепление, тъй като общността на React го избра за основен инструмент за изграждане. Webpack е нито пакет мениджър, нито изпълнител на задачи тъй като използва различен (по-напреднал) подход, но и неговата цел е също създаване на динамичен процес на изграждане.

Webpack работи с ванилия JavaScript. Можете да го използвате свържете статичните активи на приложение, като изображения, шрифтове, стилове, скриптове в един единствен файл да се погрижим за всички зависимости.

Няма да се нуждаете от Webpack, за да създадете обикновено приложение или уебсайт, например такъв, който има само един JavaScript и един CSS файл и няколко изображения, но може да бъде спасяващ живота за по-сложно приложение с няколко актива и зависимости.

Webpack vs.

И така, как се натрупва Webpack в сравнение с други инструменти за изграждане като Grunt, Gulp или Browserify?

Грънт и Гълп са състезатели. В конфигурационния си файл вие задайте задачите, и изпълнителят на задачите ги изпълнява. Най- работен поток на изпълнител на задачи по принцип изглежда така:

Webpack обаче е модул bundler който анализира целия проект, създава дърво на зависимост, и създава пакет във формат JavaScript който служи за браузъра.

Browserify е по-близо до Webpack, отколкото при изпълнение на задачи създава график на зависимостта но го прави само за модули на JavaScript. Webpack върви още една крачка напред и не само комбинира изходния код, но и не и други активи като изображения, стилове, шрифтове и др.

Ако искате да знаете повече за как Webpack се сравнява с други инструменти за изграждане, Препоръчвам ви две статии:

1. Андрю Рей Webpack: Кога да се използва и защо в собствения си блог
2. Cory House Browserify срещу Webpack на freeCodeCamp (със страхотни илюстрации)

Двете илюстрации по-горе са от Webpack материали от наръчника Pro React, друг ресурс, който си струва да погледнете.

Четири основни концепции на Webpack

Webpack има наречени са четири основни конфигурационни опции “основни понятия” които трябва да определите в процеса на разработване:

1. влизане - на начална точка на графиката на зависимостта (един или повече JavaScript файлове).
2. продукция - файла, където искате продукция, която да бъде включена в пакета (един JavaScript файл).
3. товарачи - трансформации на активите, които ги превърнете в Webpack модули така че да могат да бъдат добавен към графиката на зависимостта. Например, CSS-товарач се използва за импортиране на CSS файлове.
4. Plugins - персонализирани действия и функционалности извършени върху пакета. Например, i18n-WebPACK-приставка вгражда локализацията в пакета.

Зареждащите машини работят на базата на файл преди съставянето. Приставките се изпълняват в пакетния код, в края на процеса на компилиране.

Инсталирайте Webpack

Да се инсталирайте Webpack, отворете командния ред, отидете до папката на проекта и изпълнете следната команда:

 npm init 

Ако не искате сами да конфигурирате конфигурацията, можете да направите npm попълнете package.json файл със стойности по подразбиране със следната команда:

 npm init -y 

След това инсталирайте Webpack:

 npm install webpack --save-dev 

Ако сте използвали стойностите по подразбиране, това е начинът ви package.json файлът трябва да изглежда сега (свойствата могат да бъдат в различен ред):

 "name": "_tests", "version": "1.0.0", "description": "", "main": "webpack.config.js", "dependencies": "webpack": "^ 3.6 .0 "," devDependencies ": " webpack ":" ^ 3.6.0 "," скриптове ": " test ":" echo "Грешка: не е зададен тест" && exit 1 "," ключови думи ": []," author ":" "," license ":" ISC " 

Създайте конфигурационния файл

Трябва да създадете webpack.config.js досие в главната папка на проекта. Този конфигурационен файл има централна роля, тъй като това е мястото, където ще го направите определят четирите основни понятия (входни точки, изход, товарачи, плъгини).

Най- webpack.config.js досие притежава обект за конфигурация от кои свойства трябва да посочите. В тази статия ще посочим четирите свойства отговарят на четирите основни концепции (влизане, продукция, модул, и плъгин), но конфигурационният обект има и други свойства.

1. Създайте входните точки

Можете да имате една или повече входни точки. Трябва да ги дефинирате в влизане Имот.

Поставете следния кодов фрагмент в webpack.config.js файл. То определя една входна точка:

 module.exports = запис: "./src/script.js"; 

За да зададете повече от една входни точки, които можете да използвате или масивът, или синтаксисът на обекта.

В папката на проекта, създайте нов SRC папка и a script.js файл вътре в него. Това ще бъде вашият входна точка. За целите на тестването поставете низ вътре в него. Използвах следното (но можете да използвате и по-интересна):

 const greeting = "Здравейте. Аз съм стартов проект на Webpack."; document.write (поздрав); 

2. Определете изхода

Можете да имате само един изходен файл. Webpack обединява всички активи в този файл. Трябва да конфигурирате продукция собственост по следния начин:

 const path = require ("path"); module.exports = запис: "./src/script.js", изход: filename: "bundle.js", път: path.resolve (__ dirname, 'dist'); 

Най- име на файл собственост определя име на пакетния файл, докато път Имот указва името на директорията. Примерът по-горе ще създаде /dist/bundle.js досие.

Въпреки че не е задължително, по-добре е използвай path.resolve () метод когато дефинирате път имущество, както то осигурява точна резолюция на модула (абсолютният път на изхода се създава според различни правила в различни среди, модулната резолюция решава това несъответствие). Ако използвате path.resolve, ти трябва да изисква на път Модул на възел в горната част на webpack.config.js досие.

3. Добавете товарачите

Да се добавете товарачите, трябва да определите модул Имот. По-долу добавяме Бабел-товарач което ви позволява безопасно да използвате функциите на ECMAScript 6 във вашите JS файлове:

 const path = require ("path"); module.exports = запис: "./src/script.js", изход: filename: "bundle.js", път: path.resolve (__ dirname, 'dist'), module: rules: [test : / js$/, изключва: / (node_modules | bower_components) /, използвайте: loader: "babel-loader", опции: presets: ["env"]]]; 

Конфигурацията може да изглежда трудна, но е само копирана от него Документация на Babel loader. Повечето товарачи идват или с файл readme, или с някаква документация, така че винаги можете да знаете как да ги конфигурирате правилно. Документите на Webpack също имат страница, която обяснява как да конфигурирате module.rules.

Можете да добавите колкото се нуждаете от товарачи, Ето пълния списък. Имайте предвид, че също трябва да инсталирайте всеки товарач с npm да ги накара да работят. За товарача на Babel трябва да инсталирате необходимите Node пакети с npm:

 npm install --save-dev babel-core babel-prescription babel-preset-env webpack 

Ако погледнете към вашето package.json файл, ще видите, че npm добави три пакета, свързани с Babel devDependencies Имот, те ще се погрижат за съставянето на ES6.

4. Добавете плъгините

Да се добавете плъгините, трябва да посочите плъгини Имот. Плюс това, вие също трябва изисква плъгините един по един, тъй като те са външни модули.

В нашия пример добавяме два Webpack плъгина: Приставка за HTML Webpack и Предварително зареждане на приставката Webpack. Webpack има a хубава плъгин екосистема, можете да прегледате пълния списък тук.

За да поискате плъгините като модули на Node, създайте две нови константи: HtmlWebpackPlugin и PreloadWebpackPlugin и използвай изискват () функция.

 const path = require ("path"); const HtmlWebpackPlugin = require ("html-webpack-plugin"); const PreloadWebpackPlugin = require ("preload-webpack-plugin"); module.exports = запис: "./src/script.js", изход: filename: "bundle.js", път: path.resolve (__ dirname, 'dist'), module: rules: [test : / js$/, изключва: / (node_modules | bower_components) /, използвайте: loader: "babel-loader", опции: presets: ["env"]], плъгини: [new HtmlWebpackPlugin (), нов PreloadWebpackPlugin ()]; 

Също като в случая с товарачи, трябва също така инсталирайте плъгините на Webpack с npm. За да инсталирате двата плъгина в примера, изпълнете следните две команди в командния ред:

 npm install html-webpack-плъгин --save-dev npm инсталация --save-dev preload-webpack-plugin 

Ако проверите package.json файл сега, ще видите, че npm добави двата плъгина към devDependencies Имот.

Стартирайте Webpack

Да се създайте дървото на зависимостите и извеждане на пакета, изпълнете следната команда в командния ред:

 WebPACK 

Обикновено отнема една или две минути за Webpack за изграждане на проекта. Когато приключите, ще видите подобно съобщение в CLI:

Ако всичко върви надясно, Webpack създаден a дист папка в корена на вашия проект и постави двата свързани файла (bundle.js и index.html) вътре в него.

Github repo

Ако искате да разгледате, изтеглите или разпечатате целия проект, погледнете нашия Github repo.