Month: April 2020

Frontend development has become a challenge. These days we need all kinds of tools. Instead of having one large Javascript file or one large CSS file, you need to develop modularly and therefore you need to break up your files into many smaller files. This leads to all kinds of issues, especially with javascript since the order that your javascript is loaded can mean errors or not. “path”: __dirname+’/static’,
“filename”: “[name].[chunkhash:8].js”

I have used many tricks in the past such as creating my own BASH scripts which collected the files from folders and checked the order and trans-piled and minified them to single files. Even that process got to be a pain because it is hard to make sure things are loa “path”: __dirname+’/static’,
“filename”: “[name].[chunkhash:8].js”ded in the right order.

Webpack makes it easier

Instead of explaining webpack in a lot of paragraphs, I will create a list of videos and articles  I find helpful. First off what is Webpack? I found this video to be very helpful.
“path”: __dirname+’/static’,
“filename”: “[name].[chunkhash:8].js”

 

---

Customize Bootstrap 4 with Webpack | Webpack tutorials

---

Webpack 4 Tutorial – Getting Started for Beginners

---

Learn Webpack – Full Tutorial for Beginners

---

 

Resources, Articles & links

A Beginner’s Guide to Webpack 4 – A great article to get started with.

An introduction to source maps – An article about using source maps in javascript

Webpack using Source Maps – Webpack documentation page for source maps

Webpack source map devtool – Webpack documentation for the devtool that creates source maps, this lists the options

Webpack SourceMapDevToolPlugin – documentation, this plugin aids the source map devtool to add more features and options.

A mostly complete guide to webpack (2020) – a great article about webpack

Creating a custom webpack plugin – decent article about the basics of creating a webpack plugin