Notesheet: Webpack

Status: Work in Progress. Updated: 7 February 2020

---

Points of Interest

• When you run the file over webpack, webpack will try not to litter the global scope and so the function will not be made available globally by default (webpack by default will encase your bundle in an IIFE).
  So, if you have a HTML like <div onClick="clickHander()>Click me</div> and a simple JavaScript function in a file like function clickHander() { // .... } then clicking on the div will result in a Uncaught ReferenceError: clickHander is not defined error.
  A solution is to explicitly attach the function to global scope like this window.clickHandler = function() { // ... }.
  Or use an event listener.
  See: https://stackoverflow.com/questions/35781579/basic-webpack-not-working-for-button-click-function-uncaught-reference-error
  • This shouldn’t be a problem when working with “modern” ES6/ES2105 development practices or front-end frameworks (Vue/React/Angular). It’s more of a problem when upgrading a project with “simple” needs and old school approach.
• Roles: “use” vs “loader”
  • See: https://stackoverflow.com/questions/41750715/when-do-i-use-use-and-loader-in-webpack-2-module-rules

 

 

---

Resources

• How to configure Webpack 4 from scratch for a basic website – Currently working through this, but simple to follow.
  • From basic setup to Babel and SCSS.