如何为现有AngularJS项目配置Webpack进行资源打包？

Hey there! Since you're new to combining AngularJS with Webpack, let's walk through this setup step by step—tailored exactly to your project's directory structure. We'll get all your app/js files, assets/js libraries, and assets/css styles bundled up correctly.

Step 1: Install Required Dependencies #

First, let's install all the Webpack tools and loaders we need. Open your terminal, navigate to your project root (where package.json lives), and run this command:

npm install --save-dev webpack webpack-cli style-loader css-loader html-webpack-plugin copy-webpack-plugin babel-loader @babel/core @babel/preset-env angular

Quick breakdown of what each package does:

• webpack & webpack-cli: The core bundler and its command-line interface
• style-loader & css-loader: Handle importing and bundling CSS files into your app
• html-webpack-plugin: Automatically injects bundled JS/CSS into your index.html
• copy-webpack-plugin: Copies static assets like images/fonts to your output folder
• babel-loader & Babel presets: Lets you use modern JS syntax with AngularJS (optional but helpful)
• angular: Ensures AngularJS is included in your bundle (if not already loaded via assets/js)

Step 2: Create Webpack Configuration File #

Create a webpack.config.js file in your project root (next to package.json) with this code:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // Entry point: Your main AngularJS app file
  entry: './app/js/app.js',
  
  // Output: Where bundled files will be saved
  output: {
    filename: 'bundle.[contenthash].js', // Content hash helps with browser caching
    path: path.resolve(__dirname, 'dist'),
    clean: true // Cleans the dist folder before each build
  },
  
  // Rules for processing different file types
  module: {
    rules: [
      // Process JS files with Babel (optional but recommended)
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      // Process CSS files
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // Injects CSS directly into the DOM
      },
      // Handle image assets
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'assets/img/[name][ext]'
        }
      },
      // Handle font files
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'assets/font/[name][ext]'
        }
      }
    ]
  },
  
  // Plugins to manage HTML and static assets
  plugins: [
    // Inject bundled files into index.html and copy it to dist
    new HtmlWebpackPlugin({
      template: './app/index.html',
      filename: 'index.html'
    }),
    // Copy static assets (images/fonts) to dist
    new CopyWebpackPlugin({
      patterns: [
        { from: './app/assets/img', to: 'assets/img' },
        { from: './app/assets/font', to: 'assets/font' }
      ]
    })
  ],
  
  // Development server for live reloading
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist')
    },
    compress: true,
    port: 9000,
    hot: true
  }
};

Step 3: Update Your app/js/app.js File #

You need to import all your AngularJS components, CSS files, and third-party libraries in your main entry file. Here's an example structure:

// Import third-party JS libraries first
import 'jquery';
import 'popper.js';
import 'bootstrap';
import 'wow.js';

// Import CSS files
import '../assets/css/bootstrap.css';
import '../assets/css/style.css';
import '../assets/css/abc.css';

// Import AngularJS
import angular from 'angular';

// Import your AngularJS components
import './controller.js';
import './service.js';
import './directive.js';
import './routes.js';
import './abc.js';
import './xyz.js';

// Initialize your AngularJS app (replace with your actual module name)
angular.module('yourAngularApp', []);

Note: Make sure yourAngularApp matches the module name you're using in your controllers, services, etc.

Step 4: Update package.json Scripts #

Add these scripts to your package.json to easily run builds and the dev server:

"scripts": {
  "build": "webpack --mode production",
  "dev": "webpack serve --mode development"
}

Step 5: Adjust Your index.html #

You can remove any manual <script> or <link> tags for your app JS, CSS, or third-party libs—html-webpack-plugin will automatically inject the bundled files into your index.html in the dist folder. Keep your AngularJS directives and template references as they are.

Step 6: Run the Build or Dev Server #

• To build your project for production (outputs to the dist folder):

  npm run build
  

• To start a development server with live reloading:

  npm run dev
  

  Then open http://localhost:9000 in your browser to see your app.

Quick Extra Tip #

If you want to split third-party libraries (like jQuery/Bootstrap) into a separate bundle for better caching, you can add Webpack's splitChunks configuration. Just let me know if you want to expand on that!

内容的提问来源于stack exchange，提问作者Rajeev Bista