{"id":3150,"date":"2017-12-01T11:13:40","date_gmt":"2017-12-01T05:43:40","guid":{"rendered":"https:\/\/code4developers.com\/?p=3150"},"modified":"2018-06-13T10:32:26","modified_gmt":"2018-06-13T05:02:26","slug":"webpack-introduction-without-code","status":"publish","type":"post","link":"https:\/\/code4developers.com\/webpack-introduction-without-code\/","title":{"rendered":"Webpack: introduction without any code."},"content":{"rendered":"
\n

There have existed build tools for JavaScript as long as I have been coding with it. I can without doubt say that they are better<\/em> and easier<\/em> to understand today than they have ever been. But there are also much more you \u201cneed\u201d to know before you get started.<\/p>\n

<\/p>\n

The problem tools like Webpack, Browserify and Grunt try to solve is that on one side you got how developers want to have their code organised to make it as easy as possible to have control over this ungodly mess we have chosen to do, and how a browser prefer to consume it. While you probably prefer to have your code neatly organised in different folders with as small, but not too small, files that only have methods that do \u201cone\u201d thing. This is not how your browser prefer to consume it. And a browser is not the only way to use JavaScript these days.<\/p>\n

A browser prefer a few larger files over many<\/em> small files. What I mean by \u201cprefer\u201d is that it is faster if you do it this way. There is of course a limit to how large those files should be, webpack starts to warn you if you pass a few hundred KB. If you have too many small files, then your browser spend more time opening connections to your web server than it does on downloading them, but if they are too big your bandwidth are not used efficiently enough; if the total is a megabyte, then it would probably be faster to download it as 10 100kb files, instead of one 1014kb files or 1024 1kb files.<\/p>\n

There are also many other benefits. You can do all your css processing in the same build procedure, for example compiling from LESS or SASS to css. But the biggest advantage is to use it with Babel to enable the use of JavaScript language features that aren\u2019t available in all browser yet, or css features that are behind prefixes and let babel and css plugins convert everything to something that is safe for what ever browser requirement you define.<\/p>\n

You can also use webpack to solve one of the most annoying problems with web development, after the browsers started to become very aggressive in caching resources. That is: you updated index.js, but you can\u2019t see the changes it your browser. Or you have updated the server, but you need to get a customer to clear their caches. That\u2019s not going to happen, right?<\/p>\n

So. What you can do with webpack is to get it to generate an HTML, either an empty one or one based on something you define that links all the javascript resources for you, and get it to give the JavaScript files a unique name; so instead of bundle.js you can call them bundle-[sha1].js. And that means that there will be a new file with a new file name every time you update. No more \u201chave you cleared your caches?\u201d e-mails, slack messages or phone calls.<\/p>\n

I think every one should use something like webpack for their web development, at least if you move beyond a hundred lines or JavaScript code. There are alternatives to webpack, but I would go for it, because it seems like most of the community have adopted it as the<\/em> standard.<\/p>\n

No code or samples in this one, but I\u2019m probably going to show how I\u2019m doing stuff with webpack in the near future.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

There have existed build tools for JavaScript as long as I have been coding with it. I can without doubt say that they are better and easier to understand today…<\/p>\n","protected":false},"author":7,"featured_media":3127,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[69,68,22,67],"powerkit_post_featured":[],"class_list":{"0":"post-3150","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-browserify","9":"tag-grunt","10":"tag-javascript","11":"tag-webpack"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-OO","jetpack-related-posts":[{"id":6955,"url":"https:\/\/code4developers.com\/transpiling-in-javascript\/","url_meta":{"origin":3150,"position":0},"title":"Transpiling in JavaScript","author":"Yatendrasinh Joddha","date":"April 29, 2020","format":false,"excerpt":"Transpiling is a term used for taking source code written in one language and converting or transforming it into another language. All the browsers does not support JavaScript code written in ES6. It is a big challenge for every new gen developers. Now converting this ES6 code to ES5 is\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":14692,"url":"https:\/\/code4developers.com\/demystifying-javascript-tree-shaking\/","url_meta":{"origin":3150,"position":1},"title":"Demystifying JavaScript Tree Shaking: Boosting Performance and Reducing Bundle Size","author":"Yatendrasinh Joddha","date":"October 17, 2023","format":false,"excerpt":"In the ever-evolving world of web development, optimizing the performance of your JavaScript applications is a key concern. One effective technique to achieve this is called \"tree shaking.\" In this article, we'll delve into the concept of tree shaking, explain how it works, and provide a detailed example to illustrate\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3182,"url":"https:\/\/code4developers.com\/react-blog-post-serieses-react-development\/","url_meta":{"origin":3150,"position":2},"title":"React: A blog post series about React development","author":"Arif Khoja","date":"December 30, 2017","format":false,"excerpt":"One of the first things I wrote down in my notebook as I was planning or trying to figure out if there was enough stuff to write about to do this site was a React introduction. I know React fairly well, and have been working full-time with it for quite\u2026","rel":"","context":"In "React"","block_context":{"text":"React","link":"https:\/\/code4developers.com\/category\/react\/"},"img":{"alt_text":"react","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/12\/react_2.png?fit=375%2C375&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3119,"url":"https:\/\/code4developers.com\/difference-between-javascript-and-ecmascript\/","url_meta":{"origin":3150,"position":3},"title":"What\u2019s the difference between JavaScript and ECMAScript?","author":"Arif Khoja","date":"October 31, 2017","format":false,"excerpt":"I\u2019ve tried googling \u201cthe difference between JavaScript and ECMAScript.\u201d I ended up having to wade through a sea of ambiguous and seemingly conflicting results: \u201cECMAScript is a standard.\u201d \u201cJavaScript is a standard.\u201d \u201cECMAScript is a specification.\u201d \u201cJavaScript is an implementation of the ECMAScript standard.\u201d \u201cECMAScript is standardized JavaScript.\u201d \u201cECMAScript is\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3457,"url":"https:\/\/code4developers.com\/native-html5-games-with-phaser-and-capacitor\/","url_meta":{"origin":3150,"position":4},"title":"Native HTML5 Games with Phaser and Capacitor","author":"Arif Khoja","date":"April 17, 2018","format":false,"excerpt":"Building HTML5 games with Phaser has been somewhat of a hobby of mine over the past few years, and I will be writing a few tutorials about Phaser with a focus on developing HTML5 games for mobile. However, despite having created a few mostly finished games most of them never\u2026","rel":"","context":"In "Phaser"","block_context":{"text":"Phaser","link":"https:\/\/code4developers.com\/category\/phaser\/"},"img":{"alt_text":"phaser-starter-demo","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/04\/phaser-starter-demo-1-300x227.gif?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2462,"url":"https:\/\/code4developers.com\/local-storage-session-storage\/","url_meta":{"origin":3150,"position":5},"title":"Local Storage and Session Storage","author":"Yatendrasinh Joddha","date":"May 22, 2017","format":false,"excerpt":"What is local Storage? local storage is property for accessing Storage object, which is used to store and retrieve data from user\u2019s browser. It is accessible only at client side not at server side like cookie. Data stored in localStorage is accessible thought all pages under same domain, until user\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=3150"}],"version-history":[{"count":1,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3150\/revisions"}],"predecessor-version":[{"id":3151,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3150\/revisions\/3151"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/3127"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=3150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=3150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=3150"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=3150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}