Webpack is a module bundler. It takes modules with dependencies and emits static assets representing those modules.
If all of that still confusing to you, read surviveJS’s article ‘Webpack compared’ to understand Webpack better by seeing it explained into a historical context.
If you were just looking for a quick and minimal starter setup, go ahead and fork my webpack-react starter kit, otherwise continue reading as I’ll walk you trough that setup.
A simple two pages app scenario
Those two apps don’t do much, apart rendering the respective header on the page using react-dom. Both have react and react-dom as dependencies ,and both use ES6 and/or JSX syntax.
Note: Just for the sake of illustrating some example variations, Home.js rely on a JSX syntax while Profile.js not. Home.js rely on the ES6 module pattern while Profile.js uses the CommonJS one.
Defining npm dependencies
Before being able to configure webpack we want to make sure that we have everything we need. We therefore define our dependencies and dev-dependenciesInside package.json:
Webpack looks for a file named webpack.config.js in the root of our project. In our case we could have something like:
Let’s walk through it:
We require all the modules we may need to build our configuration file.
We expose the configuration following the export module pattern
We export a reference to the entries that we want to bundle telling webpack to compile a different file for each of them in the public directory.
Exporting the plugin array we declared earlier.
We make sure to tell webpack to use the babel-loader for any .js file to correctly transipile our files. As we rely on the latest Babel 6 that come with presets plugin, we want to make sure to pass the ones we need as a query object. Learn more about Babel 6.
If we did everything right, we could now run webpack in the terminal (make sure you installed webpack globally first)
and we should find 3 new files builded for us in the public directory:
We can now require those final assets from their respective HTML files (home.html and profile.html):
Some webpack extras.
While you can run webpack with the –watch flag so that webpack watches all dependencies and recompile on change, you can go one step further and install the WEBPACK DEV SERVER that will run a little express server for you serving the webpack bundle.
Enabling some extra plugins to optimize code for production:
By adding the Dedupe and UglifyJs plugins we can optimize our bundles from:
- public/Home.js 773 bytes
- public/Profile.js 551 bytes
- public/shared.js 675 kB
- public/Home.js 325 bytes
- public/Profile.js 207 bytes
- public/shared.js 133 kB
Read more about optimizations with webpack ***
Final thoughts and resources.
Webpack is an awesome tool that may not solve anything, but it does solve the difficult problem of bundling. Coupled with react and babel makes it a very good development tool.
To help you kickstart your development with react using Webpack fork the webpack-react starter kit