How to Setup A New Webpack App

When I just started learning about Webpack, I had issues with figuring out a way to setup my repository to work with Webpack.
There seemed to be many tutorials with different approaches and it was bothering me. That’s why I decided to combine the steps and write them down and turn into this article, so everybody can create their apps easily and can refer to it anytime a new app needs to be created.

Here are the exact steps, you need to take in order to setup Webpack app:

step 1:

npm init -y

step 2:

npm install webpack webpack-cli webpack-dev-server --save-dev

step 3:

Add scripts to npm & entry, output, devServer to webpack.config.js

step 4:

Create file: src/index.js & dist/index.html

step 5:

add node_modules dir to .gitignore

Step 1 is needed to initialize your app by creating a ‘package.json’ file where all important app options are kept. Run it inside you freshly created repository.

Step 2 installs all the required webpack packages, including webpack itself, webpack command line and webpack development server, which allows you to easily run live-like server on your local machine, with automatic reload feature.

In step 3 you need to create and edit ‘webpack.config.js’ file and add app’s ‘entry point’ and ‘devServer’ options also you need to add scripts to ‘package.json’. (Refer to the images bellow)

https://gist.github.com/zilton7/dffde146ac9bad485c94c984aea58112

webpack.config.js example

https://gist.github.com/zilton7/44bba889bf5c163f8457c07c8a231bac

packages.json example
packages.json example
packages.json example

In Step 4 you create app’s basic files. First ‘index.js’ in ‘src’ dir which you also need to create, same with ‘index.html’ in ‘dist’. Index.html file should be the standard HTML index file and must have script tag pointing to your output filename specified in ‘webpack.config.js’, in our case it’s ‘main.js’ if you followed step 3 closely. (Look at the image bellow).

Step 5 is for version control. You have to include ‘node_modules’ in ‘.gitignore’ file, so it doesn't get pushed to your remote repository.

That’s it, now your repository is ready for developing. Use ‘npm build’ to generate your main script file and ‘npm start’ to run your server in live mode.

These are the basic steps to get your app running, but when developing you will be adding much more packages to it, packages like “style-loader’, ‘css-”loader’ for styling your app and so on.

Full-Stack Web Developer. Ruby on Rails, JavaScript, React/Redux.