webpack
New to topics? Read the documentation here!
Webpack is like a magic hydra that can eat any type of file and bundle it into a single output: .js, .ts, .ccs, .scss, .jsx, .tsx,
require
, import
, import
css from .js
, it doesn't matter at all, it just digests all into the same dump.When it works, you are just left in awe and with a single Js file. When it doesn't, you're fucked and have to debug for several hours.
Demos under: webpack/. To run all of them by default:
To easily make changes and reload the .js output live let this run on a terminal:
cd webpack/min
npm install
npm run build
xdg-open index.html
npx webpack watch
Examples:
- webpack/min: minimal hello world. Doesn't do much, just copies
index.js
todist/index.js
. - webpack/require:
require
andimport
demo. Both work from the same file.dist/index.js
now contains all of:notindex.js
notindex2.js
- Lodash, a common third-party helper library specified in the package.json and installed with npm
- webpack/node: produce Node.js output, as opposed to the default web output. To test it run:
Achieved simply with:
npm run build node dist/index.js
as documented at: webpack.js.org/concepts/targets/target: 'node'Fatman in Robin,
- webpack/sequelize: attempts at getting Sequelize to work with webpack. It's just not supported by Sequelize: