{"id":343076,"date":"2021-09-22T20:00:00","date_gmt":"2021-09-22T17:00:00","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/what-does-webpack-do-and-how-do-i-use-it-for-my-website-cloudsavvy-it\/"},"modified":"2021-09-22T20:00:00","modified_gmt":"2021-09-22T17:00:00","slug":"what-does-webpack-do-and-how-do-i-use-it-for-my-website-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/what-does-webpack-do-and-how-do-i-use-it-for-my-website-cloudsavvy-it\/","title":{"rendered":"#What Does Webpack Do, and How Do I Use It for My Website? \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a26ea1454080\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a26ea1454080\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/what-does-webpack-do-and-how-do-i-use-it-for-my-website-cloudsavvy-it\/#What_Is_Webpack_for\" >What Is Webpack for?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/what-does-webpack-do-and-how-do-i-use-it-for-my-website-cloudsavvy-it\/#Webpack_Helps_You_Organize_Your_Sites_Assets\" >Webpack Helps You Organize Your Site\u2019s Assets<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/what-does-webpack-do-and-how-do-i-use-it-for-my-website-cloudsavvy-it\/#Webpack_Allows_You_to_Use_Preprocessors\" >Webpack Allows You to Use Preprocessors<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/what-does-webpack-do-and-how-do-i-use-it-for-my-website-cloudsavvy-it\/#How_to_Set_Up_Webpack\" >How to Set Up Webpack<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#What Does Webpack Do, and How Do I Use It for My Website? \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage imgchk9 alignnone wp-image-1197 size-full\" srcset=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2019\/07\/42bf547d.png?width=398&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 400w, https:\/\/www.cloudsavvyit.com\/p\/uploads\/2019\/07\/42bf547d.png?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 1200w\" sizes=\"auto, 400w, 1200w\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2019\/07\/42bf547d.png?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Webpack can bundle your JavaScript files together.\" width=\"700\" height=\"300\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Webpack is a utility that can bundle your Java<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">Script<\/a> files together. This allows you to be more organized and productive, and also allows the use of preprocessed languages like SASS and TypeScript.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"What_Is_Webpack_for\"><\/span>What Is Webpack for?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Imagine you\u2019ve been working on a website with a lot of custom JavaScript. You\u2019ve been on this project for a while, and things have quickly gotten out of hand. Your <code>index.html<\/code>\u00a0has 20 different <code>&lt;script&gt;<\/code>\u00a0tags all sourcing different files; some are your own, some are external resources you depend on. Managing these is a pain, particularly because of the way most browsers handle the loading of JavaScript. How do you ensure your code is ran after jQuery is loaded? Usually, you just put jQuery physically first in the HTML, but this is a pain to manage for many discrepancies.<\/p>\n<p>There\u2019s also the issue of performance. Every script file needs to be loaded separately. And to make matters worse, most JavaScript is render-blocking, meaning your website will not even display until it finishes downloading, parsing, and running the JavaScript. You can see this in action under the Network tab from Chrome\u2019s Dev Tools, which shows requests being sent out. The more requests you make, the longer it may take for all of them to finish.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"imgchk9 alignnone wp-image-1291 size-full\" src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2019\/08\/23e01416.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"Chrome's Dev Tools shows requests being sent out.\" width=\"700\" height=\"300\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>The solution here is\u00a0<em>bundling<\/em>. Instead of linking to external resources, you\u2019d download them all locally, and include them as dependencies of your code. Webpack bundles all of it together into one <code>main.js<\/code>\u00a0file that contains everything your site needs. You\u2019d then simply include that one JavaScript file, and get rid of all the other <code>&lt;script&gt;<\/code>\u00a0tags.<\/p>\n<p>This allows you to split code into multiple files without having to worry about concurrency issues, namespace issues, or site-loading times. Webpack also compresses and minifies the production code to save even more space.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Webpack_Helps_You_Organize_Your_Sites_Assets\"><\/span>Webpack Helps You Organize Your Site\u2019s Assets<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>In short, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/webpack\/webpack\">Webpack<\/a> allows you to use the <code>require()<\/code>\u00a0function to include one JavaScript file in another. This isn\u2019t supported in any browser, as it\u2019s something that needs to be run by a JavaScript bundler like Webpack, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/gulpjs.com\/\">Gulp<\/a>, or <a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/browserify.org\/\">Browserify<\/a> before sending to the client. This can be something simple, like importing a dependency from npm:<\/p>\n<pre>var axios = require('axios') \/\/node_modules\/axios\/index.js<\/pre>\n<p>Or something more complicated, like using images in JavaScript:<\/p>\n<pre>&lt;img src={ require('..\/..\/assets\/logo.png') } \/&gt;<\/pre>\n<p>In either case, the string in the <code>require<\/code>\u00a0function is passed to Webpack loaders. This is what defines how Webpack processes files. For example, we could use <code>file-loader<\/code>\u00a0to handle images:<\/p>\n<pre>{&#13;\n  test: \/.(png|jpe?g|gif)$\/,&#13;\n  use: [&#13;\n    {&#13;\n      loader: 'file-loader',&#13;\n      options: {},&#13;\n    },&#13;\n  ],&#13;\n}<\/pre>\n<p>If the regex in <code>test<\/code>\u00a0matches the filename, the loader is used. In this case, <code>file-loader<\/code>\u00a0would generate a URL according to your configuration based on where that file ended up. Now, when we build our files, the <code>img<\/code>\u00a0tag would look more like:<\/p>\n<pre>&lt;img src={ 'https:\/\/cdn.yourwebsite.com\/img\/341234\/logo.png' } \/&gt;<\/pre>\n<p>This allows you to have a very organized file structure, as you no longer need to worry about file locations and adding more <code>&lt;script&gt;<\/code>\u00a0and <code>&lt;link&gt;<\/code>\u00a0tags. It\u2019s not uncommon\u2014especially with frameworks like React\u2014to have projects that look like this:<\/p>\n<pre>src\/&#13;\n  |_styles\/&#13;\n  |  |_global.css&#13;\n  |  |_darkTheme.css&#13;\n  |_components\/&#13;\n  |  |_styles\/&#13;\n  |  |  |_buttonStyles.css&#13;\n  |  |_button.js&#13;\n  |_containers\/&#13;\n  |  |_homepage.js&#13;\n  |  |_users.js&#13;\n  |_index.js&#13;\n  |_app.js&#13;\n  |_package.json<\/pre>\n<p>As opposed to having a 2000 line long <code>index.js<\/code>. This makes developpement much easier in the long run, with a bit of a time investment at the start to transition to a Webpack-based environment.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"Webpack_Allows_You_to_Use_Preprocessors\"><\/span>Webpack Allows You to Use Preprocessors<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Because all Webpack does is pass off processing of files to loaders, a lot of magic can happen in those loaders. You end up with what\u2019s called a preprocessor, which can add features to the language you\u2019re working in.<\/p>\n<p>For example, <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/sass-lang.com\/\">SASS<\/a>\u00a0is a preprocessor for CSS, adding support for variables, nesting, mix ins, import and inheritance, and a <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/sass-lang.com\/guide\">whole lot of other things<\/a>. It\u2019s awesome, and the best part is it\u2019s fully compatible with regular CSS, so you don\u2019t have to worry about browser support. The end user never knows you used SASS to make your site, because you\u2019re turning the SASS code into CSS code when you bundle with webpack.<\/p>\n<p>Another useful preprocessed language is Microsoft\u2019s <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.typescriptlang.org\/index.html\">TypeScript<\/a>. TypeScript is a syntactical superset of JavaScript\u2014meaning all JavaScript code is valid TypeScript code\u2014and it adds support for strict types, turning JavaScript into a strongly typed language like the C variants. It\u2019s actually a compiled language, using the <code>tsc<\/code>\u00a0utility, but the <code>ts-loader<\/code>\u00a0Webpack extension adds support for it. The loader will compile your <code>.ts<\/code>\u00a0files into <code>.js<\/code>\u00a0files.<\/p>\n<p>If you\u2019re already happy with vanilla CSS and JavaScript, you aren\u2019t required to use any preprocessors, but for those wishing to use next-gen vanilla syntax, we recommended that you at least install <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/babeljs.io\/\">Babel<\/a>\u00a0to support ES2015 and above. This will allow you to use ES2015 features like <code>import<\/code>\u00a0and arrow functions.<\/p>\n<h2 role=\"heading\" aria-level=\"2\"><span class=\"ez-toc-section\" id=\"How_to_Set_Up_Webpack\"><\/span>How to Set Up Webpack<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>First, you\u2019ll need to have Node installed, so that you can run JavaScript outside the browser. Then, you can install Webpack from Node Package Manager (npm). Run these commands from the root of your project folder:<\/p>\n<pre>npm init -y&#13;\nnpm install webpack --save-dev&#13;\nnpm install webpack-cli --save-dev<\/pre>\n<p>This creates a new <code>package.json<\/code>\u00a0which tracks the packages you have installed. You should see a new folder called <code>node_modules<\/code>.<\/p>\n<p>Webpack is now installed, and you can run it with:<\/p>\n<pre>npx webpack<\/pre>\n<p>This assumes the entry point for your project is <code>.\/src\/index<\/code>, and that you would like the bundled file to go in <code>dist\/main.js<\/code>. If you\u2019d like to configure your setup differently or configure loaders, you\u2019ll need to make a config file. There are <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/webpack.js.org\/configuration\/\">a lot of options for you to use<\/a>, and setup will vary based on what you\u2019re using Webpack for, but most of the time the config file will be placed at the root of your project as <code>webpack.config.js<\/code>. You\u2019ll need to load this with the <code>--config<\/code>\u00a0flag, but you can automate this by specifying a script in <code>package.json<\/code>:<\/p>\n<pre>\"scripts\": {&#13;\n\u00a0 \"build\": \"webpack --config webpack.config.js\"&#13;\n}<\/pre>\n<p>Now, whenever you run:<\/p>\n<pre>npm run build<\/pre>\n<p>Webpack will run and bundle your project.<\/p>\n<p>If you\u2019d like to not have to run \u201c<code>npm run build<\/code>\u201d after every change you make, you should install <code>webpack-dev-server<\/code>, which will automatically rebuild when changes are made.\n<\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/1183\/what-does-webpack-do-and-how-do-i-use-it-for-my-website\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#What Does Webpack Do, and How Do I Use It for My Website? \u2013 CloudSavvy IT&#8221; Webpack is a utility that can bundle your JavaScript files together. This allows you to be more organized and productive, and also allows the use of preprocessed languages like SASS and TypeScript. What Is Webpack for? Imagine you\u2019ve been&#8230;<\/p>\n","protected":false},"author":1,"featured_media":343077,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2019\/07\/42bf547d.png","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-343076","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/343076","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=343076"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/343076\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/343077"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=343076"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=343076"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=343076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}