Learning Webpack core concept

2020-04-27

Main reference:

Sean Larkin’s talk Everything’s a Plugin: Understanding Webpack From the Inside Out at JS Kongress 2019


Getting started:

Build modules on the browser including non-js file

$ webpack <entry.js>

$ webpack-dev-server –port=9000

Entry point

  • a module relys on other module, dependncies

  • the first js to load to ‘kick-off’ your app, a starting point for webpack to build the dependency graph

  • what to load for the browser; compliments the output property.

Output

  • where and how to distributes the bubdles (compilations)

  • default: bundle.js

Loaders

  • js functions that takes the source fiel, and return a modifed state

  • tell webpack how to load non-js file(transfer & interpretation)

  • return compliations

test

RegEx instructs the complier which files to run the loader against

use

An array/string/function which returns loader objects

enforce

Pre/post

run this rules before/after all other rules

include&exclude

Filter through

eg.node-modules

chaining loaders

order sensitive

like a streamline

Read More