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:
1. have an exciting app idea— I Am Devloper (@iamdevloper) February 24, 2016
2. create project folder
3. include WebPack
47. lose all passion for project and give up
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:
Go ahead and create those files in your favorite editor (except the bundle.js). We will have the webpack to:
- Compile .scss file to .css file and bundle it with our JS file.
First, lets add some test code to the src\js\main.js file.
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.
The configuration tells webpack:
- What is our starting point: entry
- Where to generate the bundled file: output.path / output.filename
- 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
2. Compiling SASS files
Let’s setup SASS compilation. In your src\sass\main.scss add some test SASS code.
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:
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.
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)
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.