Categories
Resources Web Development

Bootstrap links and resources

Articles

Tree shaking with bootstrap and webpack

Learn the Bootstrap 4 Grid System in 10 Minutes

Videos

Using the Bootstrap 4 Grid | BOOTSTRAP 4 TUTORIAL


Responsive Bootstrap Website Start To Finish with Bootstrap 4, HTML5 & CSS3


Bootstrap 4 Navbar Concepts | BOOTSTRAP 4 TUTORIAL


Bootstrap 4 Alerts & Modals | BOOTSTRAP 4 TUTORIAL

Categories
Resources Web Development

Webpack resources, links and videos

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”

javascript pro tip
javascript pro tip meme

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