The minimum supported Node.js version to run webpack 5 is 10.13.0 (LTS) live previewĬheck out this guide live on StackBlitz. If you're still new to webpack, please read through the core concepts and this comparison to learn why you might use it over the other tools that are out in the community. Once installed, you can interact with webpack either from its CLI or API. Loader: ExtractTextPlugin.extract('css-loader')Īt the top we’re importing the ExtractTextPlugin.Webpack is used to compile JavaScript modules. Our Webpack config now looks like this: const path = require('path') Ĭonst ExtractTextPlugin = require('extract-text-webpack-plugin') Plugins however can keep output from appearing in our bundle. Loaders are used for pre-processing data before it’s output into our bundle.
To do this, we’re going to make use of a Plugin: ExtractTextPlugin. We can split the CSS in cache busting (files with unique hashes) and then include these files into our resulting bundle.įor now, let’s just extract the CSS and output it into a file that we can then import. This is clever, but there are other ways for us to process the CSS. If we inspect the resulting HTML in Chrome we can see the following: If we now run Webpack and reload our application the results will look like this:īehind the scenes these two Loaders have dynamically added the styles to the HTML document. Also note that Webpack processes Loaders from right to left, so the results of css-loader (the file contents) are passed to style-loader (adding the styles to the HTML document) Note that this time it's plural as we're supplying an array of Loaders.
Index.js var totalMultiply = multiply(5, 3) Ĭonsole.log('Product of 5 and 3 = ' + totalMultiply) Ĭonsole.log('Sum of 5 and 3 = ' + totalSum) We decide to split these functions into separate files for easier maintenance: Let’s assume we have an application that can perform two simple mathematical tasks - sum and multiply.
This is especially useful for Single Page Applications (SPAs), which is the defacto standard for Web Applications today.Īll code for the blog can be found at the Webpack Tutorial: Understanding How it Works repository on GitHub. It takes disparate dependencies, creates modules for them and bundles the entire network up into manageable output files. Making Webpack Look Good - CSS & Styling.Making Dependencies Available, And Linking Them.Reducing Dependency HTTP Traffic with Bundling.Although there are alternatives to Webpack, it is still very popular and with version 2.2 recently released I believe it will remain so for quite a while yet. We here at ag-Grid use Webpack to bundle our own products, as well as using it with some of our framework examples.
One of these was Webpack - a powerful bundler used in many applications & frameworks. When I first started working at ag-Grid (which is a great place to work!) I had to ramp up on many technologies and frameworks that I hadn’t used before. This Webpack tutorial is my attempt to document what I learnt and is the blog I wish I’d found when I first started my Webpack journey, all those months ago.