The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Setting Up a Node.js Project

Next ►
►

In this section, we will guide you through the process of setting up a Node.js project with Webpack. This will include configuring Webpack to bundle your Node.js application, setting up loaders and plugins, and ensuring that your development environment is optimized for efficiency.

Prerequisites

Before we begin, ensure you have the following installed:

  • Node.js (v12 or higher)
  • npm (Node Package Manager) or yarn

Step 1: Initialize the Project

First, create a new directory for your project and initialize it with npm.

mkdir my-nodejs-project
cd my-nodejs-project
npm init -y

This will create a package.json file with default settings.

Step 2: Install Webpack and Dependencies

Next, install Webpack and its CLI along with other necessary dependencies.

npm install --save-dev webpack webpack-cli

Step 3: Create the Project Structure

Create the following directory structure for your project:

my-nodejs-project/
├── src/
│   └── index.js
├── dist/
├── webpack.config.js
└── package.json
  • src/: This directory will contain your source code.
  • dist/: This directory will contain the bundled output.
  • webpack.config.js: This is the Webpack configuration file.

Step 4: Configure Webpack

Create a webpack.config.js file in the root of your project and add the following configuration:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  target: 'node',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js']
  }
};

Explanation:

  • entry: Specifies the entry point of your application.
  • target: Set to 'node' to indicate that the bundle is for a Node.js environment.
  • output: Defines the output directory and filename for the bundled code.
  • module.rules: Configures loaders. In this case, we use babel-loader to transpile ES6+ code to ES5.
  • resolve: Specifies file extensions to resolve.

Step 5: Install Babel

To use modern JavaScript features, install Babel and its presets.

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

Step 6: Create the Source File

Create an index.js file inside the src directory with the following content:

const http = require('http');

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, World!\n');
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}/`);
});

Step 7: Build the Project

Add a build script to your package.json:

"scripts": {
  "build": "webpack"
}

Run the build script:

npm run build

This will create a bundle.js file in the dist directory.

Step 8: Run the Bundled Code

To run the bundled code, use Node.js:

node dist/bundle.js

You should see the message Server running at http://localhost:3000/ in your terminal. Open your browser and navigate to http://localhost:3000/ to see the "Hello, World!" message.

Summary

In this section, you learned how to set up a Node.js project with Webpack. You configured Webpack to bundle your Node.js application, set up Babel to transpile modern JavaScript, and created a simple HTTP server. This setup provides a solid foundation for building more complex Node.js applications with Webpack.

Next, you can explore more advanced configurations and optimizations to further enhance your development workflow.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved