How to set up AngularJS project with Webpack



Image not found!!

Setting up an AngularJS project with Webpack involves several steps. Below, I'll outline a basic setup process:

  1. Install Node.js and npm: If you haven't already, download and install Node.js from the official website (https://nodejs.org/). npm (Node Package Manager) will be installed along with Node.js.

  2. Create a new directory for your project:

    bash
    mkdir my-angular-project
cd my-angular-project

  3. Initialize a new npm project:

    bash
    npm init -y

  4. Install AngularJS and Webpack dependencies:

    bash
    npm install angular@1.x --save
npm install webpack webpack-cli --save-dev

  5. Create project structure: Create directories for your project files:

    plaintext
    /my-angular-project
|-- /src
    |-- app.js
    |-- index.html

  6. Create an AngularJS module and a basic component: Create a file src/app.js:

    javascript
    // src/app.js
import angular from 'angular';

angular.module('myApp', [])
.controller('MainController', function($scope) {
    $scope.message = 'Hello, AngularJS!';
});

  7. Create an HTML file as the entry point: Create a file src/index.html:

    html
    <!-- src/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS with Webpack</title>
</head>
<body ng-app="myApp" ng-controller="MainController">
    <h1>{{ message }}</h1>
    <script src="bundle.js"></script>
</body>
</html>

  8. Create a Webpack configuration file: Create a webpack.config.js file in the root of your project:

    javascript
    // webpack.config.js
const path = require('path');

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

  9. Install necessary loaders and plugins:

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

  10. Build your project:

    bash
    npx webpack

  11. Run your project: Open dist/index.html in a browser to see your AngularJS application running.

That's it! You have now set up an AngularJS project using Webpack. This is a basic setup, and you can extend it further with additional loaders, plugins, and configurations depending on your project requirements.

Category List