Webpack+React多页面网站配置报错求助：模块解析失败

Hey there! Let's work through your multi-page Webpack issues one by one—sounds like you're just a few tweaks away from getting this running smoothly.

1. Fixing the "Can't resolve '../src/services.js'" Error #

This error almost always boils down to incorrect path resolution in your Webpack config or import statements. Here's what's likely going wrong and how to fix it:

Common Culprits & Solutions #

• You might not have set a clear context in your Webpack config, so Webpack is looking for files from the wrong root directory.
• Your resolve settings might not be telling Webpack where to look for your source files.
• Import paths in your JS files might be mismatched with your project structure.

Corrected Webpack Config #

Here's a complete, working webpack.config.js tailored for your 2-page setup:

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

module.exports = {
  // Set the root directory for all entry files to ./src
  context: path.resolve(__dirname, 'src'),
  entry: {
    index: './index.js', // Path relative to the context above
    hello: './hello.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true // Automatically clear the dist folder on build
  },
  resolve: {
    // Tell Webpack to look for modules in ./src first, then node_modules
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    // Allow omitting .js extensions when importing
    extensions: ['.js']
  },
  plugins: [
    // Generate home page HTML, auto-inject the index bundle
    new HtmlWebpackPlugin({
      template: '../public/index.html',
      filename: 'index.html',
      chunks: ['index'] // Only include the index bundle for this page
    }),
    // Generate hello page HTML, auto-inject the hello bundle
    new HtmlWebpackPlugin({
      template: '../public/hello.html',
      filename: 'hello.html',
      chunks: ['hello'] // Only include the hello bundle for this page
    })
  ],
  module: {
    rules: [
      // Optional: Add Babel if you need to transpile modern JS
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  }
};

Verify Your Project Structure #

Make sure your files are organized like this to match the config:

your-project/
├── src/
│   ├── services.js
│   ├── index.js
│   └── hello.js
├── public/
│   ├── index.html
│   └── hello.html
└── webpack.config.js

Fix Import Statements #

In both index.js and hello.js, import services.js with a path relative to the src folder (or let the resolve settings handle it):

// Either works thanks to our resolve config
import { sayHello } from './services.js';
// OR
import { sayHello } from 'services.js';

2. Fixing the Link Navigation Issue #

You mentioned using the src attribute for your link—that's the problem! The <a> tag uses the href attribute for navigation, not src (which is for assets like images or scripts).

Corrected Link Code #

In your index.js (or directly in public/index.html), create your link like this:

document.addEventListener('DOMContentLoaded', () => {
  const link = document.createElement('a');
  link.href = './hello.html'; // Use href, not src!
  link.textContent = 'Click Me';
  document.body.appendChild(link);
});

Or if you prefer static HTML in public/index.html:

<a href="./hello.html">Click Me</a>

This points directly to the hello.html file that Webpack will generate in your dist folder, so navigation will work both in development and production.

Final Checks #

1. Install any missing dependencies if you haven't already:

npm install webpack webpack-cli html-webpack-plugin --save-dev

2. Add build scripts to your package.json:

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

3. Run npm run dev to test the dev server, or npm run build to generate production files.

That should resolve both your module resolution error and navigation issue!

内容的提问来源于stack exchange，提问作者Sam Germain