Quickly setup a JavaScript project with webpack, babel + scss

Mazaher Muraj
Nov 7 · 3 min read
Photo by Max Nelson on Unsplash

Setting up a javascript project with webpack and babel for beginners can be a daunting step. I know it was for me and because of that I ran scared of it for a long time. But over time, I learned that it’s not so difficult after all. However it can be time consuming to repeatedly create a setup for your project.

tl;dr
In this article I’ll show you the steps you can take to quickly set this up. But if you just want to fork the repo then go ahead and click here. But if you want to follow along, then read on!

Step 1

Open up your terminal cd to the location you want to create you project. I like to have a projects folder called dev on my desktop so in my case I’m going to cd desktop/dev`.

  • Create your project folder by doing mkdir <name of project folder>. I’m going to call mine project-webpack-boilerplate.
  • You can create a package.json file by either using yarn or npm. I like yarn, so I will run yarn init . Just press Enter at every prompt.
  • Create the file structure like so:
project-webpack-bolierplate
--src
--app
--public
--styles
.babelrc
package.json
webpack.config.js

You .babelrc, package.json and webpack.config.js files should be on the same level as src .

Step 2

Open your webpack.config.js file and insert the following:

const HtmlWebpackPlugin = require('html-webpack-plugin')const ExtractTextPlugin = require('extract-text-webpack-plugin')require("babel-polyfill")module.exports = {  entry: ['babel-polyfill', __dirname + '/src/app/index.js'],  output: {   path: __dirname + '/dist',   filename: 'bundle.js',   publicPath: '/'  },  module: {   rules: [   {   test: /\.js$/,   use: 'babel-loader',   exclude: [/node_modules/]},{  test: /\.(sa|sc|c)ss$/,  use: [{  loader: 'style-loader'  }, {  loader: 'css-loader'  }, {  loader: 'sass-loader'  }]  },  {  test: /\.css$/,  use: ExtractTextPlugin.extract({  fallback: 'style-loader',  use: [  { loader: 'css-loader'},  { loader: 'sass-loader'}  ],  })  }  ]},  plugins: [  new HtmlWebpackPlugin({  template: __dirname + '/src/public/index.html',  inject: 'body'  }),  new ExtractTextPlugin('main.css')  ],  devServer: {  contentBase: './src/public',  port: 8000  }}

Open your .babelrc file and insert the following:

{  "presets": ["@babel/preset-env"],}

Now you should have a project setup with webpack, babel and scss. So let’s test it.

Step 3

Create the following in your src folders:

--app
index.js
--public
index.html
--styles
main.scss

Step 4

Add/Install packages to your package.json

"devDependencies": {"@babel/core": "^7.6.0","@babel/preset-env": "^7.6.0","babel-core": "^6.26.3","babel-loader": "^8.0.6","babel-plugin-module-resolver": "^3.2.0","babel-preset-env": "^1.7.0","babel-polyfill": "^6.26.0","css-loader": "^3.2.0","extract-text-webpack-plugin": "^4.0.0-beta.0","html-webpack-plugin": "^3.2.0","node-sass": "^4.12.0","sass-loader": "^8.0.0","style-loader": "^1.0.0","webpack": "^4.40.2","webpack-cli": "^3.3.8","webpack-dashboard": "^3.2.0","webpack-dev-server": "^3.8.0"}

You can the add a script just above the devDependencies to start the project

"scripts": {"start": "webpack-dev-server --history-api-fallback --inline --progress"}

Now you should have a complete JavaScript project with webpack, babel and scss setup.


You can refer to the github repo (linked here) to see how I’ve implemented it. I’ve even added alias in the babelrc to escape ../../../../..hell`. Check it out!

I hope this helped. If it did, please share and give me a 👏

Mazaher Muraj

Written by

Frontend React Developer

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade