Frontend Development 13 min read

Setting Up a Modern Frontend Development Environment with Node, npm, Webpack, Babel, and SASS

This tutorial walks through creating a comfortable frontend development workflow by installing Node.js, managing packages with npm and nrm, initializing a project, configuring Webpack with Babel and SASS loaders, and enabling hot module replacement for seamless code updates.

Hujiang Technology

Aug 31, 2017

Setting Up a Modern Frontend Development Environment with Node, npm, Webpack, Babel, and SASS

When building a Web App that will be iterated on frequently, a comfortable development environment is essential. This guide shows how to set up such an environment using Node.js, npm, and a series of modern tools.

Basic environment : Install Node.js (which includes npm ) and verify the installation:

$ node -v
v6.11.0

$ npm -v
3.10.10

Because the default npm registry can be slow in China, install nrm to switch registries, then select the Taobao mirror:

$ npm install -g nrm
$ nrm use cnpm

For managing multiple Node versions, install nvm (or a Windows alternative) and check its version:

$ nvm --version
0.33.0

Project initialization : Create a new folder, run npm init , and set up the following structure:

.
├── package.json
└── src
    ├── index.css
    ├── index.html
    └── index.js

Sample index.js :

var el = document.createElement('div'),
    text = document.createTextNode('My App');

el.appendChild(text);
document.body.appendChild(el);

Sample index.html :

<!doctype html>
<html>
<meta charset="utf-8" />
  <title>My App</title>

Webpack configuration : Install Webpack and create webpack.config.js :

npm install --save-dev webpack

let path = require('path');
module.exports = {
  entry: {
    app: path.resolve(__dirname, 'src', 'index.js')
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  }
};

Install webpack-dev-server and add a start script to package.json :

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

"scripts": {
  "start": "webpack-dev-server --port 3003"
}

To inject the bundle into an HTML template, install html-webpack-plugin and modify the config:

npm install --save-dev html-webpack-plugin

let HtmlWebpackPlugin = require('html-webpack-plugin'),
    path = require('path');
module.exports = {
  entry: { ... },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'src', 'index.html')
    })
  ]
};

Adding ES6 modules : Create src/utils/utils.js with an ES6 function and import it in index.js :

export function wordsToSentence(...words) {
  return words.join(' ');
}

import { wordsToSentence } from './utils/utils';
let el = document.createElement('div'),
    text = document.createTextNode(wordsToSentence('Welcome', 'to', 'my', 'app!'));

el.appendChild(text);
document.body.appendChild(el);

Because older browsers may not support ES6, install Babel loader and preset, create a .babelrc , and extend the Webpack config:

npm install --save-dev babel-loader babel-core babel-preset-env

{
  "presets": ["env"]
}

module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      include: path.resolve(__dirname, 'src')
    }
  ]
}

CSS handling : Install style-loader and css-loader , import the CSS in index.js , and add the loader rule:

npm i --save-dev style-loader css-loader

import './index.css';

module: {
  rules: [
    {
      test: /\.css$/,
      loader: ['style-loader', 'css-loader'],
      include: path.resolve(__dirname, 'src')
    }
  ]
}

Switch to SASS for richer styling: rename index.css to index.scss , update the import, and install the SASS loader:

npm install --save-dev sass-loader node-sass

module: {
  rules: [
    {
      test: /\.scss$/,
      loader: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, 'src')
    }
  ]
}

Hot Module Replacement : Enable hot updates by adjusting the start script:

"scripts": {
  "start": "webpack-dev-server --hot --inline --port 3003"
}

Now, when you modify index.scss , the changes are pushed to the browser without a full page reload, providing a smooth development experience.

In summary, the article demonstrates how to assemble a modern frontend toolchain—including Node.js, npm, nrm, nvm, Webpack, Babel, and SASS—while also enabling hot module replacement for rapid iteration.

frontend Babel Webpack nodejs npm SASS

Written by

Hujiang Technology

We focus on the real-world challenges developers face, delivering authentic, practical content and a direct platform for technical networking among developers.

0 followers

Reader feedback

How this landed with the community

Rate this article

Was this worth your time?

Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.