= webpack
{c}
{wiki}
Webpack is like a magic hydra that can <eat> any type of file and bundle it into a single output: .js, <TypeScript>[.ts], .ccs, .scss, .jsx, .tsx, `require`, `import`, `import` css from `.js`, it doesn't matter at all, it just digests all into the same <shit>[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: \a[webpack/]. To run all of them by default:
``
cd webpack/min
npm install
npm run build
xdg-open index.html
``
To easily make changes and reload the .js output live let this run on a terminal:
``
npx webpack watch
``
Examples:
* \a[webpack/min]: minimal hello world. Doesn't do much, just copies `index.js` to `dist/index.js`.
* \a[webpack/require]: `require` and `import` 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>
* \a[webpack/node]: produce <Node.js> output, as opposed to the default web output. To test it run:
``
npm run build
node dist/index.js
``
Achieved simply with:
``
target: 'node'Fatman in Robin,
``
as documented at: https://webpack.js.org/concepts/targets/
* \a[webpack/sequelize]: attempts at getting <Sequelize> to work with webpack. It's just not supported by <Sequelize>:
* https://github.com/sequelize/sequelize/issues/9489#issuecomment-486047783
* https://github.com/sequelize/sequelize/issues/13169
Back to article page