In this series you will learn what Webpack is, why it’s so awesome, and how to get started using it on your own projects. This is too long for one post so it will be broken up into multiple parts. This part will contain the following:
- Whats webpack
- Configuring / First Build
- Watching Files and Production Builds
- Importing NPM Modules
Getting the starter files
Before we begin, we’re going to need some starter files. Clone or download the following git repository to your desktop.
Here’s a quick breakdown of what you downloaded:
- js/index.js - webpack entry point where we’ll place our import statements.
- build/index.html - HTML file to test our bundles
Now that we have some starter files, lets
cd into the project directory and install Webpack. Webpack is a NPM module so we’ll have to initiate NPM before installing.
Note: Before running the commands below, insure that you have Node JS installed.
Your project directory should now contain a
package.json file, a
node_modules folder, and possibly a
Now that we have Webpack installed we can add a NPM script to run the webpack command. Open your
package.json file and add a script
build which runs
webpack. The completed file should look similar to this:
Now anytime we run
npm run build from terminal it will run the
webpack command and bundle our modules.
Configuring webpack and our first build
We configure webpack in a file called
webpack.config.js. Create this file in the root of your project directory. Open the file and copy and paste the following code to it:
In our config file we’re giving Webpack an entry point and output. When we run
npm run build, Webpack will go inside our
index.js file (the entry point) retrieve all imports inside, and output a single file containing everything to
Before we run the command we need to import our js partials. Open
js/index.js and add the following two lines:
Save and run
npm run build from terminal. It should output something like this:
Look inside your
build folder and you should have a
bundle.js which contains both our imports! Open the
index.html in a browser and check console to verify it’s working. You should see “Hello” and “World”.
Importing NPM Modules
The coolest thing about Webpack is that you can import NPM modules, this gives us an awesome system of managing our dependencies.
Let’s try importing jQuery. To start we’ll have to install it as an NPM module.
Now we can import jQuery in any of our files. Lets do so in
hello.js. At the top add the following line to import jQuery.
Now at the bottom lets add a line to test that jQuery is imported and working.
npm run build again, then refresh the browser window and verify there’s no errors in console. We can now import and use jQuery in any file we please.
Watching files and production builds
npm run build every time we make a change gets annoying real quick. The
webpack command accepts several flags that do different things. We can add the
-w flag to watch files for changes or the
-p to create a production ready build that are minified.
Lets open our
package.json file and add a second script called
dev which runs
webpack with the
-w flag. Lets also add the
-p flag to our existing
Now we can run
npm run dev and webpack will watch for file changes and recompile for each change. Our existing
npm run build will now output a minified
Conclusion and moving forward