4

I am a newbie to webpack and currently trying to understand basic concepts. Looking at the official docs, on the page Concepts it uses module term and gives link to read more about modules on page Modules.

So on this page we have question "What is a module" but no explicit answer to that is given. Rather, it describes modules by how they "express their dependencies":

What is a webpack Module

In contrast to Node.js modules, webpack modules can express their dependencies in a variety of ways. A few examples are:

  • An ES2015 import statement

  • A CommonJS require() statement

  • An AMD define and require statement

  • An @import statement inside of a css/sass/less file.

  • An image url in a stylesheet url(...) or HTML file.

So it doesn't explicitly defines what exactly is the module and I am confused now.

Is module just a javascript file? Or is it any type of file like .css or images? Or is module some logical concept not related to physical files at all?

mlst
  • 2,688
  • 7
  • 27
  • 57

1 Answers1

4

The simple answer to your question is that a Webpack Module is a Javascript file that is processed by Webpack.

As for why that's a thing, well, consider the following Javascript:

if (window.matchMedia('(max-width: 600px)')) {
  const img = document.querySelector('#header-responsive-image');
  img.src = 'different/image/url/file.jpg';
  img.classList.add('some-class');
}

Note that this code has dependencies on specific markup, image files, and CSS rules. But crucially you have to read the code to find out what they are. There's no (easy) way to statically analyze the dependencies (or even do it by hand!).

This may not seem like a big deal in small apps, but when you're working with a large Javascript codebase or authoring a component library, the ability to statically analyze the real dependency graph and have your tools warn you immediately when your JS, CSS, markup, and files on disk get out of sync is a lifesaver.

With Webpack at the top of the file you're going to see something more like this:

import header600Width from '../img/header-600-width.jpg';
import '../styles/has-some-class.css';
// etc.

You can load images, csv, xml, toml, json, css, and the list goes on. This is something that other modules systems by-and-large can't or won't do. So a Webpack module is, in a sense, a superset of a Javascript module.

Jared Smith
  • 19,721
  • 5
  • 45
  • 83
  • You might want to add a word about module loaders, this might offer a better overview of what webpack can process: https://webpack.js.org/loaders/ – Silviu Burcea Jun 28 '21 at 06:46
  • So in your code example, are .css and .jpg files also a "webpack module"? – mlst Jun 29 '21 at 21:08
  • 1
    @mlst no, they are imported by the module, and Webpack manages the underlying resource for you, but they aren't modules themselves. – Jared Smith Jun 29 '21 at 22:58
  • ok, one last question: when CSS, JPG files are imported by the module they get converted to some kind of JS code or data structure (eg. css-loader converts CSS file to JS Array and jpg is converted to base64 string that represents image data). Now we can manipulate these if we wanted (although it's not very pratical) but they are certainly some kind of JS...so can we consider those to be a webpack module? So I am not talking about CSS or JPG as physical files, but their JS representation (eg. header600Width above) once they are imported and converted - is that considered a webpack module now? – mlst Jul 02 '21 at 10:22
  • 1
    @mlst I wouldn't. It depends on the asset, but generally they don't have a meaningful JS representation, that's part of the abstraction. For images for instance webpack just creates a URL (as a JS string) for you. The reason this matters is that a) it relieves you of having to manage string representation of paths on the server filesystem yourself: webpack will create an appropriate one that can be set to the src of an img for you and b) all the dependency graph stuff I talked about in the answer. For CSS you don't have to worry about link tags and stylesheet.insertRule, webpack handles it. – Jared Smith Jul 02 '21 at 10:45