Вступ до Webpack: що це таке і як ним користуватися

Вступ

Гаразд, я гадаю, ви чули про webpack - ось чому ви тут, так? Справжнє питання полягає в тому, що ви про це знаєте? Ви можете знати про це кілька речей, наприклад, як це працює, або у вас немає абсолютно жодних понять. У будь-якому випадку, я можу запевнити вас, що прочитавши цю статтю, ви, мабуть, почуватиметесь досить комфортно з цілою ситуацією з веб- пакетом .

Зрештою - необхідність - це мати винаходу ...

Ідеальний спосіб сказати, чому існує веб-пакет, - це наведена вище цитата. Але, щоб краще зрозуміти це, нам потрібно повернутися назад, ще в той час, коли JavaScript не був новою сексуальною річчю, у ті давні часи, коли веб-сайт був лише невеликим набором старого доброго . html, CSS, а в деяких випадках, можливо, один або кілька файлів JavaScript. Але дуже скоро все це мало змінитися.

У чому була проблема?

Вся спільнота розробників брала участь у постійних пошуках покращення загального досвіду користувачів та розробників щодо використання та створення javascript / веб-додатків. Тому ми побачили багато нових бібліотек та фреймворківвведено.

Кілька шаблонів дизайну також еволюціонували з часом, щоб надати розробникам кращий, потужніший, але дуже простий спосіб написання складних програм JavaScript. Раніше веб-сайти були не просто невеличким пакетом із непарною кількістю файлів. Вони заявили, що з введенням модулів JavaScript стає громіздким, оскільки написання інкапсульованих невеликих фрагментів коду є новою тенденцією. Врешті-решт все це призводить до ситуації, коли ми мали 4 або 5 разів файлів у загальному пакеті програм.

Загальний розмір програми був не лише складним завданням, але й існував величезний розрив у тому вигляді коду, який розробники писали, і в тому вигляді коду, який могли зрозуміти браузери. Розробникам довелося використовувати багато допоміжного коду, який називається polyfills, щоб переконатися, що браузери змогли інтерпретувати код у своїх пакетах.

Для відповіді на ці питання було створено веб-пакет. Webpack - це пакет статичного модуля.

То як відповідь був Webpack?

Коротше кажучи, Webpack переглядає ваш пакет і створює, як він називає, графік залежностей, який складається з різних модулів, які вашому веб-додатку знадобляться для роботи, як очікувалося. Потім, залежно від цього графіка, він створює новий пакет, який складається з мінімально необхідної кількості необхідних файлів, часто лише з одного файлу bundle.js, який можна легко підключити до файлу html і використовувати для програми.

У наступній частині цієї статті я проведу покрокове налаштування веб-пакета. На закінчення, сподіваюся, ви зрозуміли основи Webpack. Тож давайте розкачаємось…

Що ми будуємо?

Ви напевно чули про ReactJS. Якщо ви знаєте responseJS, ви, мабуть, знаєте, що таке додаток create- response . Для тих з вас, хто не уявляє, що це з того, що є, ReactJS - це бібліотека інтерфейсу, яка дуже допомагає у створенні інтелектуальних складних інтерфейсів, а create-React-App - це інструмент CLIдля налаштування або завантаження шаблону розробника для створення програм React.

Сьогодні ми створимо простий додаток React, але без використання CLI create-response-app. Сподіваюся, це звучить для вас досить весело. :)

Етап встановлення

нм / хв

Правильно, ось так починаються майже всі хороші речі: звичайний старий npm init. Я буду використовувати VS Code, але сміливо використовуйте будь-який редактор коду, який вам подобається, щоб розпочати роботу.

Перш ніж зробити щось із цього, подумайте, переконайтеся, що на вашому комп'ютері встановлено найновіший nodeJS та версію npm. Клацніть на кожне з цих посилань, щоб дізнатись більше про процес.

$ npm init

Це створить початковий пакет і додасть файл package.json для нас. Тут будуть згадані всі залежності, необхідні для побудови цього додатка.

Тепер для створення простого додатку React нам потрібні дві основні бібліотеки: React та ReactDOM. Тож давайте додамо їх як залежності в наш додаток за допомогою npm.

$ npm i react react-dom --save

Далі нам потрібно додати веб-пакет, щоб ми могли об’єднати наш додаток. Не тільки пакет, але ми також потребуємо гарячого перезавантаження, яке можливо за допомогою веб-сервера розробника.

$ npm i webpack webpack-dev-server webpack-cli --save--dev

Потрібно --save--devвказати, що ці модулі є лише залежностями розробника. Тепер, оскільки ми працюємо з React, ми повинні пам’ятати, що React використовує класи ES6 та оператори імпорту, чого не можуть зрозуміти всі браузери. Щоб переконатися, що код читається всіма браузерами, нам потрібен такий інструмент, як babel, щоб перевести наш код у звичайний читабельний код для браузерів.

$ npm i babel-core babel-loader @babel/preset-react @babel/preset-env html-webpack-plugin --save-dev

Ну що я можу сказати, це була максимальна кількість встановлень, які я обіцяю. У випадку з babel ми спочатку завантажили основну бібліотеку babel, потім завантажувач і, нарешті, 2 плагіни або пресети для спеціальної роботи з React та всіма новими кодами ES2015 та ES6.

Продовжуючи, давайте додамо код і розпочнемо конфігурацію веб-пакета.

Ось як повинен виглядати файл package.json після всіх встановлених на даний момент. У вас може бути інший номер версії, залежно від того, коли ви читаєте цю статтю.

Кодекс

Почнемо з додавання файлу webpack.config.js до кореня нашої структури програми. Додайте наступний код у файл webpack.config.

const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = { //This property defines where the application starts entry:'./src/index.js',
 //This property defines the file path and the file name which will be used for deploying the bundled file output:{ path: path.join(__dirname, '/dist'), filename: 'bundle.js' },
 //Setup loaders module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] },
// Setup plugin to use a HTML file for serving bundled js files plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ]}

Гаразд, так давайте розберемось у рядках вище.

Спочатку ми починаємо з того, що вимагаємо модуля шляху за замовчуванням для доступу до розташування файлу та внесення змін до розташування файлу.

Далі ми вимагаємо, щоб HTMLWebpackPlugin створив HTML-файл, який буде використовуватися для обслуговування пакетних файлів / файлів JavaScript. Детальніше про HTMLWebpackPlugin натисніть на посилання.

Тоді ми маємо об’єкт export.module з деякими властивостями в них. Перший - це властивість входу,which is used to specify which file webpack should start with to get the internal dependency graph created.

module.exports = {
 entry:'./src/index.js'
}

Next up is the output property specifying where the bundled file should be generated and what the name of the bundled file would be. This is done by the output.path and output.filename properties.

module.exports = {
//This property defines the file path and the file name which will be used for deploying the bundled file output:{ path: path.join(__dirname, '/dist'), filename: 'bundle.js' },
}

Next up are the loaders. This is to specify what webpack should do for a specific type for file. Remember that webpack out of box only understands JavaScript and JSON, but if your project has any other language used, this would be the place to specify what to do with that new language.

module.exports = {
//Setup loaders module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] }
}

The information should be specified in an object for each module property, which further has an array of rules. There will be an object for every case. I have also specified to exclude everything in my node_modules folder.

Next up is the plugin property. This is used to extend the capabilities of webpack. Before a plugin can be used in the plugin array inside the module exports object, we need to require the same.

module.exports = {
// Setup plugin to use a HTML file for serving bundled js files plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ]
}

This particular plugin, as explained earlier, will use the specified file in our src folder. It’ll then use that as a template for our HTML file where all the bundled files will be automatically injected. There are a lot of other out of the box plugins that we could use — checkout the official page for more information.

The last thing we need to do is create a .babelrc file to use the babel preset we installed and take care of the ES6 classes and import statements in our code. Add the following lines of code to the .babelrc file.

{ "presets": ["env", "react"]}

And just like that, now babel will be able to use those presets. Okay so enough of the setup — let’s add some React code to see how this works.

React Code

Since the starting point for the application is the index.js file in src folder, let’s start with that. We will start by requiring both React and ReactDOM for our use in this case. Add the below code in your index.js file.

import React from 'react';import ReactDOM from 'react-dom';import App from './Components/App';
ReactDOM.render(, document.getElementById('app'));

So we simply import another file from our components folder, which you will create, and add another file in the folder called App.js. So let’s see what’s inside the App.js file:

import React, { Component } from 'react'
class App extends Component { render() { return ( 

Webpack + React setup

) }}
export default App;

We are almost done. The only thing left now is to enable hot reloading. This means that every time a change is detected, the browser auto reloads the page and has the ability to build and bundle the entire application when the time comes.

We can do this by adding script values in the package.json file. Remove the test property in the scripts object of your package.json file and add these two scripts:

"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"

You are all set! Go to your terminal, navigate to the root folder, and run npm start. It should start a dev server on your computer and serve the HTML file in your browser. If you make any minor/major changes and save the code, your browser will be automatically refreshed to show the latest set of changes.

Once you think you are ready to get the app bundled, you just need to hit the command, npm build, and webpack will create an optimised bundle in your project folder which can be deployed on any web server.

Conclusion

This is just a small application or use case of webpack and babel, but the applications are limitless. I hope you are excited enough to explore more options and ways of doing things with webpack and babel. Please refer to their official websites to know more and read in depth.

I have created a Github repo with all the code in it, so please refer to it incase of any questions.

ashishcodes4/webpack-react-setup

Setting a react application from scratch without using CLI - ashishcodes4/webpack-react-setupgithub.com

My two cents about webpack? Well, at times you may think that it’s nothing more than a tool, and why should you bother too much for a tool? But trust me when I say this: the initial struggle while learning your way around webpack will save you an enormous number of hours you would otherwise invest developing without webpack.

That’s all for now, hope to be back with yet another interesting article very soon. I hope you have enjoyed reading this one!

In case you face any difficulty or issues while following any of the above mentioned steps/processes, please feel free to get in touch and leave comments.

LinkedIn: //www.linkedin.com/in/ashish-nandan-singh-490987130/

Twitter: //twitter.com/ashishnandansin