Webpack: the six concepts to know to get started

npm install

To think: a few weeks ago, I didn’t even realize I needed to run an npm install every time I cloned down a repo. "I've already installed node and npm!"

Turns out installing npm on your machine one time does not magically manage node modules for all your projects. That's where build tools can come into play.

Build tools operate by creating module bundles that are themselves sent as a group to the browser. Webpack is the leading build tool, a “static module bundler for modern JavaScript applications”. Let's unpack that webpack.

Modules

The most basic layer of a module is an independent .js file. They operate independent of other files in the same folder, unless of course we invoke the import and export keywords.

export : allows the module to be public code
import : passes down public code from module to another.

The 6

Entry Points

This is the module Webpack uses to build out the internal dependency graph.
By default it’s the index.js file.
To choose a different main module, we can set an entry point property in the webpack configuration file

module.exports = {
    entry: './entry/file/path.js',
};

Dependency Graphs

Webpack will take your entry point and process your project for the modules it depends on. From there, it will bundle all the dependencies into a single file. This allows everything your project relies on (async operations, non-code files, external scripts) to be exported to the browser and executed as a module.

Output

Can also be configured in the webpack configuration file. This is the destination of the bundle or bundles. By default it loads to ./dist, and like the entry you can specify an output in your configuration file.
const path = require('path');

module.exports = {
  entry: './entry/file/path.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-webpack.bundle.js',
  },
};

Loaders and Plugins

transform non-code files to be part of the webpack configuration and the dependency graph
converts files such as css, font families, and images into valid JavaScript modules
2 main properties

1. test: checks if a file needs to be converted
2. use: decides which loader will do the conversion

Can set rules (under module.rules for test and use )

const path = require('path');

module.exports = {
  output: {
    filename: 'my-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

Backbone of webpack’s plugin interface is the Tapable utility library. Plugins allow for customization in the compilation process. Plugins have access to a module’s compiler and hook into key events.

Modes

3 parameters:

development:
production : default mode
none : to opt out of any default optimization options

This allows users to specify the node environment and determines how the builtin webpack optimizations should be deployed. Of course, mode is set in your Webpack configuration file.

Browser Compatibility and Programming Environment

Out of the box, Webpack ensures that your code is ES5-compliant, meaning it will run on older browsers that do not support newer ECMAScript features.

To use Webpack 5, all you need is Node.js version 10.13.0 or higher. It’s that simple!

Image
JavaScript.Info
webpack.js - Getting Started