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.htmlnpx webpack watchExamples:
- webpack/min: minimal hello world. Doesn't do much, just copies
index.jstodist/index.js. - webpack/require:
requireandimportdemo. Both work from the same file.dist/index.jsnow contains all of:notindex.jsnotindex2.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.jsas 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: