Getting started with basic webpack setup

I hope I don't need to introduce you to Webpack. By this time, you would have read through the webpack documentation and figured out that the page is for the NASA people. However, I would like to start with this Gem:

So, here's a very, very basic setup of Webpack to help you get started. I will keep this article as simple as I can. Also I assume that you know the basics of NPM and have installed Node in your machine.

0. Our Goal

We are going to create a simple setup that will have the following structure:

app
|--src
|   |--js
|   |   `--main.js
|   `--scss
|       `--main.scss
|--resources
|   `--js
|       `--bundle.js
|--package.json
`--index.html

Go ahead and create those files in your favorite editor (except the bundle.js). We will have the webpack to:

  1. bundle our JavaScript files from src folder and generate the output to resources/js/bundle.js file.
  2. Compile .scss file to .css file and bundle it with our JS file.
  3. Have a auto reloading mechanism that auto refresh the browser as you make changes to your JavaScript / Sass files.

1. Installing Webpack and bundling JavaScript

First, lets add some test code to the src\js\main.js file.

console.log('Hello Webpack');

You need to run npm install webpack -g (to have the webpack command available globally). Also, it is better to install it as a dev dependency too. So run npm install webpack --save-dev.

Now that you have webpack installed, it's time to tell it what to do. We do this via a configuration file. Create a file called webpack.config.js in the root folder and add the following content in it.

/* webpack.config.js */
module.exports = {
    entry: './src/js/main.js',
    output: {
        path: './resources/js',
        filename: 'bundle.js',
        publicPath: '/resources/js'
    }
}

The configuration tells webpack:

  1. What is our starting point: entry
  2. Where to generate the bundled file: output.path / output.filename
  3. What's the path that browsers will ues to load the bundled file: output.publicPath. This is important to have the auto reload work properly when we use webpack-dev-server.

Now if you run webpack in your command line, you will see that the JavaScript file is getting bundled and the output is generated in resources/js/bundle.js file.

2. Compiling SASS files

Let's setup SASS compilation. In your src\sass\main.scss add some test SASS code.

body {
    background-color: #f00;
}

To enable SASS compilation, we need to install loaders which will be used by webpack. Run npm install style-loader css-loader sass-loader --save-dev.

Next, you need to update webpack.config.js file, instructing webpack to use the loaders. The final content of webpack configuration will be:

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: './resources/js',
        filename: 'bundle.js',
        publicPath: '/resources/js'
    },
    module: {
        loaders: [
            {
                test: /\.scss$/,
                loaders: ['style', 'css', 'sass']
            }
        ]
    }
}

Take a look at the module.loaders configuration. We are adding a new loader that tests for the .scss extension and for the matching files, uses a series of transformation (from right to left) sass -> css -> style.

Now update src\js\main.js to include the SASS file.

require('../scss/main.scss');
console.log('Hello Webpack');

Now if you run webpack, you will see that the SASS file is converted and bundled together with our JS files into resources/js/bundle.js.

3. Serving and Auto reloading changes.

We need a web server that serves our file. Webpack provides one. Install it with npm install webpack-dev-server -g (to have the command available globally) and npm install webpack-dev-server --save-dev to define a dev dependency in your package.json.

Add below content to the index.html file to load our bundled file (omitting boilerplate code for brevity)

<html>
    <body>
        <h1>Hello World</h1>
        <script type="text/javascript" src="resources/js/bundle.js"></script>
    </body>
</html>

Now run webpackdev-server --inline. The parameter --inline instruct the webpack server to auto reload changes. Without it, it will just serve the files.

Now open this url in a browser: http://localhost:8080/ and you will see the text Hello World in a red color background. Now update any of the main.scss or main.js and you will see the changes are reflected immediately.

Happy Webpacking!

undefined

Chat with the Author

This post was written by Veera, a software developer by profession and a maker by passion.

You will be taken to twitter.com where you can edit the tweet before posting.

If you liked my writing, you may like my products