I’m sure you know Grunt. It was great back there in 2013 but not much these days. The new coolest bro in town is Webpack. It bundles your app into other bundling patterns so you can use all the libraries available in NPM right into your front-end code, load different modules and do many other things. It is extremely flexible.
- Lazy loading: Load bundles only when you need them.
- Hot Module Reloading: Instant update components without the need to refresh your application.
- Hashing: Used for cache busting. File names will be converted to hashed filenames automatically.
- Source maps: For easy debugging minified versions of your application.
Make sure you have node.js installed. Probably you already have this since most of modern development tools use NPM. When node.js is installed you can run the following command:
This will make the webpack command globally available.
Install the webpack-dev-server. This enables you to use the webpack-dev-server for any project you want.
Now Webpack is installed we can start setting up a new project. Create a project directory and init npm. This will ask some questions about your project. These settings can be changed in your
Now it’s time to set up your app. In the root of your project create an
index.html file. This will be the entry point for your browser.
The next thing to do is to create a
src/app.js file. For now we just set the content of the
Cool! The app’s entry point is set up. Let’s do some Webpack magic. Run the following command:
This above command will grab the
app.js and compile it to
bundle.js which is loaded in the
Congratulations! Your first Webpack bundle is a fact. Easy does it!
Create a file named
webpack.config.js in the root of your project. This file will contain all your configuration, loaders and information related to your build.
Now, when you want to compile your app just run:
This saves you some time typing the whole command over and over again. But there is more! Webpack comes with a feature called
watch. This is a setting you can set in the config file as well. When set to
true webpack will watch for changes in your project files and will recompile your assets directly.
Now the only thing you need to do is run the
webpack command once and it will watch your whole app. Stopping the command can be done by pressing
Awesome! Your very first basic Webpack development environment is set up! A short summary of what we’ve done:
- Installed webpack and webpack-dev-server by npm.
- Initialized a new npm project.
- Created an
- Created a
bundle.jsand watches for changes.
Now we have set up our Webpack settings correctly it is time to take a look at the webpack-dev-server we’ve installed earlier. Running this server is easy.
That’s it! Webpack is now watching your files and serves your app through
http://localhost:8080. Last thing we want to do is automatically refresh the page when a file changes.
This can also be done in
webpack.config.js. Just set
inline: true for the devServer. The complete webpack.config.js now looks like this:
Here is a screen capture of the above setup in action:
There are hundreds of loaders available. For now we just stick with the Sass loader. This will take your sass and scss files and compile them into a single css file. First lets install them:
Next you want to let webpack know about the sass-loader. Again we will add some settings to
app.scss file in the ‘src’ directory.
Then require it in
You might wonder where your actual css file is. The Sass loader doesn’t actually write a file to your filesystem. Styles are stored in app.js and will import them into your page as inline stylesheets.
Pro tip: When you want to upload your project to a production environment be sure to compile your
build.js file first!
That’s it! A basic setup for compiling Sass files with Webpack. The source code can be found on github: https://github.com/timrijkse/compiling-sass-with-webpack
There is much more possible and this setup can be expanded in many ways, these will be discussed in other posts. Don’t hesitate to ask questions if you have any. Drop a comment below or follow me on twitter.
Now back to battle! Style some pages! :)