Skip to content

Latest commit

 

History

History
109 lines (67 loc) · 2.95 KB

README.md

File metadata and controls

109 lines (67 loc) · 2.95 KB
Raw

Webpack 5 Examples

What is webpack? https://webpack.js.org

Webpack is a module bundler. It turns source files into deployable web application artifacts.

  • Processes JavaScript and JSON by default.
  • Can be extended to process other file types.
  • Creates a compiler instance which crawls import tree from entry points.
  • Compiler populates a compilation object as it traverses.
  • Provides hooks to give loaders and plugins access to the compiler and compilation object to perform additional, custom operations.
  • Outputs bundles.

Usage of this repo

Examples of various webpack configs, generally increasing in complexity.

For each subdirectory:

  • npm install

For 01-03:

  • ./node_modules/.bin/webpack

For 04-14:

  • npm start

The Examples

01 - Basic

  • Webpack without a configuration file.
  • mode argument (development or production)
  • dist output directory
  • Take a look at the output bundle!
  • Run node dist/main.js for kicks.

02 - Basic With Config

  • Webpack with a simple configuration file.
  • Uses default configuration file name/location

03 - Custom config

  • A mildly customized configuration file, demonstrating some basic settings.
  • Example of how dev/prod configs start to differ
  • Fingerprinting

04 - Environment configs

  • Basic example of having environment-specific (dev, prod) configurations.
  • Common configuration entry point which branches on NODE_ENV.

05 - Common configuration extraction

  • Extracting common configuration elements into a separate file, merged into environment configs.

06 - Webpack Dev Server

  • Usage with webpack-dev-server (very common).
  • Note generated HTML file.
  • Note that bundle is not written to filesystem. It's stored in memory.

07 - Express

  • Running webpack-dev-middleware and webpack-hot-middleware with express
  • Note how hot reloading becomes difficult.
  • Needs a "real" HTML file.

08 - Loaders

  • Using some common loaders for other file types.
  • There are lots of loaders: https://webpack.js.org/loaders/
  • If you didn't realize my love for my cat earlier, you will now.

09 - Plugins

10 - Babel

  • Using babel-loader for JavaScript transpilation.
  • Example of babel preset-env.
  • Note how output changes (const, for instance) if the output target is changed to "ie": "11"

11 - Plugin Authoring

12 - Split Chunks

  • Having multiple entry points and common code extraction.

13 - DLLs

  • Using DLL plugins to extract third party code for faster builds / caching.
  • Note: Example 13 (DLLs) is currently a bit broken. It doesn't properly exclude jquery from the main application bundle.

14 - Code splitting

  • Code splitting with dynamic imports. import()