如何让子项目复用父项目的node_modules？含Webpack配置需求

Hey there! Let's break down how to solve your two main goals: getting those subprojects to reuse the main project's node_modules (no more duplicate folders!) and setting up Webpack properly for SASS, Bootstrap, and jQuery.

1. Reuse the Main Project's node_modules Across Subprojects #

First off, you can ditch the node_modules folders and package.json files in all your subprojects (PROJECT.1, PROJECT.2, PROJECT.3). We’ll centralize all dependency management in the main project—if any subproject had unique dependencies, just move those to the main package.json so everything shares the same set of packages.

To make sure Webpack and Node.js know where to find the main node_modules, use one of these methods:

Option 1: Configure Webpack’s resolve.modules #

Update your main project’s webpack.config.js to prioritize the main node_modules when resolving modules:

const path = require('path');

module.exports = {
  // ...your existing config
  resolve: {
    modules: [
      path.resolve(__dirname, 'node_modules'), // Point to main project's node_modules
      'node_modules' // Fallback just in case
    ]
  }
};

This tells Webpack to look in the main project’s node_modules first when compiling any subproject code.

Option 2: Set the NODE_PATH Environment Variable (Optional) #

If you run commands directly in the terminal, you can set an environment variable to make Node.js default to the main node_modules:

# Linux/macOS (add to .bashrc/.zshrc for permanent effect)
export NODE_PATH=/full/path/to/MAIN_PROJECT/node_modules

# Windows PowerShell
$env:NODE_PATH = "C:\full\path\to\MAIN_PROJECT\node_modules"

2. Configure Webpack Loaders for SASS, Bootstrap, and jQuery #

You’ve already got jQuery and Bootstrap installed, but we need to add loaders to process SASS, CSS, and the assets Bootstrap uses (like fonts and icons).

Step 1: Install Required Loaders #

Run this in your main project’s root to install the dev dependencies:

npm install sass sass-loader css-loader style-loader postcss-loader autoprefixer --save-dev

Step 2: Add Rules to Webpack Config #

Update the module.rules section in webpack.config.js to handle different file types:

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: './assets/js/main.js', // Your main JS entry point
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'assets/dist') // Compiled files go here
  },
  // ...existing resolve config from earlier
  module: {
    rules: [
      // Process SASS/SCSS files
      {
        test: /\.(scss|sass)$/,
        use: [
          'style-loader', // Inject compiled CSS into the DOM
          'css-loader', // Resolve @import and url() in CSS
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [require('autoprefixer')()] // Auto-add browser prefixes
              }
            }
          },
          'sass-loader' // Compile SASS to CSS
        ]
      },
      // Handle Bootstrap fonts/icons
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/fonts/[name][ext]' // Output to main assets/fonts
        }
      },
      // Handle Bootstrap image assets
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/,
        type: 'asset/resource',
        generator: {
          filename: 'assets/images/[name][ext]' // Output to main assets/images
        }
      }
    ]
  },
  // Make jQuery globally available for Bootstrap
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
  ]
};

Step 3: Import Bootstrap Styles in Your SASS #

Create a main SASS file (e.g., assets/styles/main.scss) and import Bootstrap—this lets you customize Bootstrap variables too:

// Optional: Override Bootstrap default variables first
$primary: #2563eb; // Your custom primary color

// Import Bootstrap's full SASS
@import 'bootstrap/scss/bootstrap';

Then import this SASS file in your main JS entry point (assets/js/main.js):

import '../styles/main.scss';

3. Clean Up Your Project Structure #

To keep things organized, I’d recommend simplifying your project structure like this:

MAIN PROJECT
- assets/
  - js/
    - main.js
  - styles/
    - main.scss
  - dist/ // Webpack will compile files here
- node_modules/
- index.php
- package.json
- webpack.config.js
- PROJECT.1/
  - index.php
- PROJECT.2/
  - index.php
- PROJECT.3/
  - index.php

Then in each subproject’s index.php, reference the compiled assets from the main project:

<!-- Example in PROJECT.1/index.php -->
<link rel="stylesheet" href="../assets/dist/main.css">
<script src="../assets/dist/main.js"></script>

内容的提问来源于stack exchange，提问作者Vasco Castro