In order to make websites efficient and portable, a lot of transpilation is needed.
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:
webpack/template contains a reasonable starter template.
This will produce, under
dist/ the following minimized files:dist/index.html: from webpack/template/index.html. You can open it to see:show on the browser. This was added from JavaScript.Hello webpackdist/index.js: from webpack/template/index.js and anything in its import tree, e.g.:- webpack/template/main.scss: sass source. It gets embedded the the JavaScript output as a string, and the JavaScript then applies it to the page, making the font blue
lodashthird party library
You can also run this test with the development server on localhost:9000:
which uses unminimized outptus, and automatically push reloads the page whenever you change any of the input files!
npm startThis example shows how to use @cirosantilli/_file/webpack/webpack/sass.
To make things simple, it generates a completely separate
dist/index.js and dist/main.css which are manually included from index.html, and does not do any type of injection (neither Js into HTML nor CSS in Js).This example shows how you could manually include the
dist/index.js that is output from webpack into your index.html.This is generally not what you want to do, because what you actually want to do is to use a Js output name with a hash in it, so that browsers only need to refetch when the name changes.
And to do that, we have to let webpack dynamically inject that unpredictable hash as done in webpack/template with:
new HtmlWebpackPlugin({
filename: 'index.html',
// Inject the include to our hashed filename,
// since it is not deterministic due to the hash.
inject: true,
template: path.resolve(__dirname, 'index.html'),
}),This shows how to produce a minimized fully embedded CSS file with webpack from a sass:
That example produces a
cd webpack/sass
npm install
npm run build
xdg-open index.htmldist/main.css file which is a compresesd combination of:- webpack/sass/main.scss
- normalize.css, added to the project as a regular
node_modulespackage
Articles by others on the same topic
There are currently no matching articles.