Webpack 5多页面站点配置问题求助：CSS失效与JS不运行

我正在尝试使用Webpack 5构建多页面站点，目前大部分文件已正常输出至dist目录，但存在两个问题：

• 开发环境下SCSS/CSS文件被忽略；
• 将dist目录部署到服务器后，JS文件存在但无法运行。

已在index.js和purchaselinks_object.js中正确导入SCSS文件：

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

Webpack 公共配置 (webpack.common.js) #

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

const pages = ['index', 'products'];

module.exports = {
  entry: {
    index: {
      import: ['./src/js/index.js'],
      dependOn: 'shared',
    },
    products: {
      import: ['./src/js/purchaselinks_object.js', './src/js/custom_select.js'],
      dependOn: 'shared',
    },
    shared: 'js-cookie',
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif|webp)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.html$/i,
        use: 'html-loader',
      },
    ],
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
  plugins: [].concat(
    pages.map(
      page =>
        new HtmlWebpackPlugin({
          inject: true,
          template: `./src/${page}.html`,
          filename: `${page}.html`,
          chunks: [page],
        }),
    ),
  ),
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true,
    assetModuleFilename: pathData => {
      const filepath = path
        .dirname(pathData.filename)
        .split('/')
        .slice(1)
        .join('/');
      return `${filepath}/[name][ext][query]`;
    },
  },
};

Webpack 开发环境配置 (webpack.dev.js) #

const { merge } = require('webpack-merge');
const common = require('./webpack.common');

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    static: './dist',
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { sourceMap: true } },
          { loader: 'postcss-loader', options: { sourceMap: true } },
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { sourceMap: true } },
          { loader: 'postcss-loader', options: { sourceMap: true } },
          { loader: 'sass-loader', options: { sourceMap: true } },
        ],
      },
    ],
  },
});

Webpack 生产环境配置 (webpack.prod.js) #

const { merge } = require('webpack-merge');
const common = require('./webpack.common');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = merge(common, {
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
});

当前输出文件 #

多次重新配置后，dist目录始终生成以下文件：

index.bundle.js
index.css
products.bundle.js
products.css
shared.bundle.js

这些文件已按预期注入到dist目录下的HTML文档中，但之前单页站点时存在的runtime.bundle.js现在没有生成，不确定是否与此相关。

1. 开发环境SCSS/CSS失效问题 #

问题根源在于devServer静态资源配置和chunk依赖未完整注入：

• Webpack 5的devServer默认从内存读取编译后的资源，而非本地dist目录，修改webpack.dev.js的devServer配置：

devServer: {
  devMiddleware: {
    publicPath: '/',
  },
  static: {
    directory: path.join(__dirname, 'src'),
  },
}

• 确认所有CSS相关依赖已安装：style-loader、css-loader、sass-loader、postcss-loader、sass（dart-sass替代node-sass）。

2. 部署后JS无法运行问题 #

核心原因是缺少runtime模块加载逻辑，且未在HTML中引入依赖的公共bundle：

步骤1：生成独立runtime文件 #

在webpack.common.js的optimization中显式开启runtimeChunk：

optimization: {
  runtimeChunk: 'single', // 生成独立的runtime.bundle.js，负责模块加载逻辑
  splitChunks: {
    chunks: 'all',
  },
},

步骤2：补全HTML注入的chunk列表 #

修改HtmlWebpackPlugin的chunks配置，加入runtime和shared（页面入口依赖这两个bundle）：

new HtmlWebpackPlugin({
  inject: true,
  template: `./src/${page}.html`,
  filename: `${page}.html`,
  chunks: ['runtime', 'shared', page], // 按runtime → shared → 页面入口的顺序引入
}),

额外检查 #

• 部署后查看浏览器Network面板，确认所有JS文件返回200状态码，无路径错误；
• 查看浏览器控制台，排除模块未找到、语法错误等问题。

内容的提问来源于stack exchange，提问作者Erik Nuber