React项目：仅打包JS文件至Public目录并监听变更的实现方案咨询

Great question—Webpack is absolutely the right tool for this, and setting it up to meet your needs is straightforward. Let’s walk through the exact configuration, plus a simpler alternative if you want to avoid Webpack’s sometimes verbose setup.

Option 1: Webpack Configuration #

Step 1: Basic Webpack Setup #

First, install Webpack and its CLI if you haven’t already:

npm install webpack webpack-cli --save-dev

Step 2: Create webpack.config.js #

This file will tell Webpack to bundle your JS entry point into the public directory and only watch JS file changes. I’ve added comments to explain each key part:

const path = require('path');

module.exports = {
  // Entry point: Point this to your main JS file (adjust path to match your project)
  entry: './src/index.js',
  // Output configuration
  output: {
    // Save the bundled file directly to your public directory
    path: path.resolve(__dirname, 'public'),
    // Name of your final bundled JS (rename this to whatever you prefer)
    filename: 'bundle.js',
    // Optional: Cleans the public directory before each build to avoid old files
    clean: true
  },
  // Use development mode for faster watch builds and source maps
  mode: 'development',
  // Enable watch mode so Webpack auto-rebuilds on changes
  watch: true,
  // Configure watch options to ignore non-JS files
  watchOptions: {
    // Ignore node_modules and all non-JS file types (adjust patterns if needed)
    ignored: /node_modules|\.(html|css|json|png|jpg)$/i,
    // Optional: Wait 300ms after the last change before rebuilding (prevents frequent rebuilds)
    aggregateTimeout: 300
  },
  // Optional: Add Babel support for modern JS features (ES6+)
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  // Optional: Generate source maps for easier debugging of your original JS code
  devtool: 'source-map'
};

If you want to use Babel, install the required packages first:

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

Step 3: Run the Watch Command #

Add this script to your package.json:

{
  "scripts": {
    "watch": "webpack --watch"
  }
}

Now run npm run watch—Webpack will bundle your JS into public/bundle.js and only rebuild when any JS file in your source directory changes.

Using the Bundle in Other Frameworks #

Just include the bundled JS file in your PHP/ASP templates like this:

<script src="/bundle.js"></script>

Option 2: Vite (Simpler Alternative) #

If you want a faster, less verbose setup, Vite is a great choice. It’s optimized for modern JS and has built-in watch functionality that’s easier to configure.

Step 1: Install Vite #

npm create vite@latest my-js-bundle -- --template vanilla
cd my-js-bundle
npm install

Step 2: Configure Vite #

Create a vite.config.js file to set the output directory to public and focus on JS files:

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    // Output the bundled file to your public directory
    outDir: 'public',
    // Bundle into a single JS file suitable for script tag inclusion
    rollupOptions: {
      input: {
        main: './src/main.js' // Your main JS file
      },
      output: {
        format: 'iife', // Ideal for browser use
        entryFileNames: 'bundle.js'
      }
    }
  },
  // Configure watch to only track JS files
  server: {
    watch: {
      ignored: ['!**/*.js'] // Ignore everything except JS files
    }
  }
});

Step 3: Run the Watch Build #

Add this script to package.json:

{
  "scripts": {
    "watch": "vite build --watch"
  }
}

Run npm run watch—Vite will watch your JS files and rebuild public/bundle.js automatically whenever changes are detected.

Key Notes #

• React Compatibility: If you’re still using React components but want to bundle them for cross-framework use, adjust your entry point to render your React app into a DOM element (e.g., <div id="root"></div>) that exists in your PHP/ASP template. Make sure React and ReactDOM are included in your bundle (or load them via CDN).
• Customization: Feel free to tweak the ignored file patterns in either config if you have other JS-related files (like .jsx) you want to watch.

内容的提问来源于stack exchange，提问作者Faisal Janjua