You may have a vision for a brilliant product or business. You could be looking for a pragmatic and proactive person to work in true partnership with you. Perhaps your business requires modernisation. Please get in touch. hello@mctweb.co.uk
Many useful tools have been created to improve the development experience. Webpack took the web development world by storm. Ever since its release, it was adopted by major companies like Airbnb and Facebook, and web development frameworks like Nuxt, Vue and React.
What is webpack and why should I use it in development?
Webpack is the preferred tool for putting your code through a processing pipeline and bundling the result into a single file - or in multiple files if you utilise code-splitting.
Why would I need this?
By using other modules in your web pages, a variety of problems can occur such as variable name collision and bugs created by the order of code. With webpack, we can use the Node.js moduling system, CommonJS. This allows you to use require() and module.exports
Are there other benefits?
Using CommonJS is such a fantastic reason - that for many that would be enough to use Webpack in your build process. However, due to the incredible flexibility you can also use Loaders and Plugins in the processing pipeline. Loaders work before or at the beginning of the bundle generation, and works at the individual file level, whereas plugins work at the end of the generation pipeline, and control the whole bundle.
What loaders should I use?
The most useful loader that I implement in my development pipeline is the Babel loader. You may remember 'Babel Fish' translation? Well, this could be compared to this, as this lets you use new syntax that could not be processed in older browsers. Babel translates the new syntax code into the older code. This can help your code stay readable without making the website unusable for a large user base.
I also use webpack so that I can write components with all required data in it's own module. This means that parts can be reused throughout sites and changed easily - such as buttons, call to actions (CTA), headers and contact forms.
As for other loaders, there are many to choose from; most would be specific to the project's requirements. I use html.minify to remove all the spaces, comments, empty elements and paragraphs. By doing this it removes data that is only used for readability - which isn't required after deploying. I also use it to extract my js and css into small files, as this is better for caching and preload isolation. You can find a great list here of all things webpack.