Learning Webpack

April 2, 2020

This project has really allowed me to explore npm and webpack recently. In the past, I used frameworks like Nuxt.js that already had webpack integrated so I didn't have to configure much. With Mithril, I followed the instructions on this article and didn't realize how easy it was to get webpack installed and running so quickly. I was also amazed at how fast webpack generated files when it didn't have much configured.

Once I got it running, I added the following capabilities in this order:

added babel-loader to support ES6 modules
converted the CommonJS webpack.config.js file to an ES6 webpack.config.babel.js file
added eslint-loader to check code for formatting issues
added html-webpack-plugin to generate an index file
added clean-webpack-plugin to remove generated files on rebuild
added mini-css-extract-plugin to generate CSS from SCSS
added copy-webpack-plugin to copy static files into the distribution folder
enabled splitChunks to separate out the vendored modules into a separate file
added output.publicPath to set all assets to absolute instead of relative in the index.html file

It was definitely a good learning experience and I recommend you configure webpack on your own if you've never set it up from scratch before. Here's a great place to start.