Въведение в Webpack: какво е и как да го използвате

Въведение

Добре, предполагам, че сте чували за webpack - затова сте тук, нали? Истинският въпрос е какво знаете за него? Може да знаете няколко неща за него, например как работи, или да нямате абсолютно никаква представа. Така или иначе, мога да ви уверя, че след като прочетете тази статия, най-вероятно ще се чувствате достатъчно комфортно с цялата ситуация с уеб пакети .

В крайна сметка - необходимостта е майката на изобретението ...

Перфектен начин да кажете защо съществува webpack е горният цитат. Но за да го разберем по-добре, трябва да се върнем назад, назад, към времето, когато JavaScript не беше новото секси нещо, в онези стари времена, когато уебсайтът беше само малък пакет от добри стари . html, CSS и в някои случаи вероятно един или няколко JavaScript файла. Но много скоро всичко това щеше да се промени.

Какъв беше проблема?

Цялата общност на разработчиците участваше в постоянен стремеж към подобряване на цялостното изживяване на потребителите и разработчиците около използването и изграждането на javascript / уеб приложения. Затова видяхме много нови библиотеки и рамкивъведени.

Няколко дизайнерски модела също се развиха с течение на времето, за да дадат на разработчиците по-добър, по-мощен, но много лесен начин за писане на сложни JavaScript приложения. Уебсайтовете преди това не бяха просто малък пакет с нечетен брой файлове в тях. Те заявиха, че стават обемисти с въвеждането на JavaScript модули , тъй като писането на капсулирани малки парчета код е новата тенденция. В крайна сметка всичко това води до ситуация, в която имаме 4x или 5x he файлове в общия пакет за приложения.

Общият размер на приложението не само беше предизвикателство, но също така имаше огромна пропаст в вида на кода, който разработчиците пишат, и вида на кода, който браузърите могат да разберат. Разработчиците трябваше да използват много помощни кодове, наречени polyfills, за да се уверят, че браузърите могат да интерпретират кода в своите пакети.

За да се отговори на тези проблеми, беше създаден webpack. Webpack е пакет за статичен модул.

И така, как беше отговорът на Webpack?

Накратко, Webpack преминава през вашия пакет и създава това, което той нарича графика на зависимост, която се състои от различни модули, от които вашето уеб приложение трябва да функционира според очакванията. След това, в зависимост от тази графика, той създава нов пакет, който се състои от минимално необходимия брой файлове, често само от един файл bundle.js, който може лесно да бъде включен в html файла и използван за приложението.

През следващата част на тази статия ще ви преведа през стъпка по стъпка настройка на webpack. Накрая се надявам да разберете основите на Webpack. Така че нека вземем това търкаляне ...

Какво изграждаме?

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

Днес ще създадем просто приложение React, но без да използваме CLI на create-response-app. Надявам се това да ви звучи достатъчно забавно. :)

Фаза на инсталиране

npm int

Точно така, така започват почти всички добри неща: обикновен стар npm init. Ще използвам VS Code, но не се колебайте да използвате всеки редактор на код, който искате да започнете.

Преди да можете да направите нещо от това, помислете, уверете се, че имате най-новия nodeJS и версията npm, инсталирани локално на вашата машина. Кликнете върху всяка от тези връзки, за да научите повече за процеса.

$ npm init

Това ще създаде стартов пакет и ще добави файл package.json за нас. Тук ще бъдат споменати всички зависимости, необходими за изграждането на това приложение.

Сега за създаване на просто приложение React се нуждаем от две основни библиотеки: React и ReactDOM. Така че нека ги добавим като зависимости в нашето приложение, използвайки npm.

$ npm i react react-dom --save

След това трябва да добавим уеб пакет, за да можем да обединим приложението си. Не само пакет, но ще изискваме и горещо презареждане, което е възможно с помощта на webpack dev сървъра.

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

Целта --save--devе да се уточни, че тези модули са просто 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 код нататък.

Продължавайки, нека добавим малко код и нека започнем конфигурацията на webpack.

Ето как файлът 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 файл, който да се използва за обслужване на пакетни файлове / файлове в пакет. Прочетете повече за 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