Netlify部署Webpack项目目录结构配置求助：Pug/SCSS等文件处理问题

Hey there! Let's work through this Netlify + Webpack setup issue step by step. Since Netlify requires your index.html to live at the repo root, we'll focus on configuring Webpack to output your compiled files correctly while handling Pug, SCSS, and JS with your desired directory structure.

First, Let's Define a Clear Project Structure #

Here's a recommended setup that keeps source files organized while ensuring Netlify's requirements are met:

your-project/
├── src/
│   ├── pug/
│   │   ├── index.pug       # Your main Pug entry file
│   │   └── partials/       # Optional: Pug partial files (headers, footers, etc.)
│   ├── scss/
│   │   ├── main.scss       # Main SCSS entry
│   │   └── components/     # Optional: Modular SCSS files
│   ├── js/
│   │   ├── app.js          # Main JS entry
│   │   └── modules/        # Optional: JS modules/utils
│   └── assets/
│       └── images/         # Your already-working image assets
├── index.html              # Generated by Webpack (Netlify will use this)
├── webpack.config.js
└── package.json

Webpack Configuration Breakdown #

Let's configure each part to handle your Pug, SCSS, JS, and output index.html to the root.

1. Install Required Dependencies

First, make sure you have all necessary loaders and plugins installed:

npm install pug pug-html-loader html-loader html-webpack-plugin sass sass-loader css-loader mini-css-extract-plugin --save-dev

2. Full Webpack Config File

Here's a complete webpack.config.js that addresses your needs:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // Set entry points for JS and SCSS
  entry: {
    app: ['./src/js/app.js', './src/scss/main.scss']
  },
  // Output compiled files to the repo root (with organized subfolders)
  output: {
    path: path.resolve(__dirname),
    filename: 'js/[name].[contenthash].js', // JS goes to root/js/
    clean: true, // Clear old files on each build
    assetModuleFilename: 'assets/images/[name].[hash][ext]' // Match your existing image setup
  },
  module: {
    rules: [
      // Handle Pug files
      {
        test: /\.pug$/,
        use: [
          'html-loader',
          {
            loader: 'pug-html-loader',
            options: {
              pretty: process.env.NODE_ENV !== 'production', // Format HTML in dev, minify in prod
              root: path.resolve(__dirname, 'src/pug') // Make partial imports easier in Pug
            }
          }
        ]
      },
      // Handle SCSS files
      {
        test: /\.scss$/,
        use: [
          // Extract CSS to separate files in production, inject via style tag in dev
          process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
          'css-loader', // Resolve @import and url() in CSS
          'sass-loader' // Compile SCSS to CSS
        ]
      },
      // Your existing image loader config (since it's already working)
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource'
      }
    ]
  },
  plugins: [
    // Generate index.html at the repo root from your Pug template
    new HtmlWebpackPlugin({
      template: './src/pug/index.pug',
      filename: 'index.html',
      inject: 'body' // Auto-inject compiled JS/CSS into the body
    }),
    // Extract compiled CSS to root/css/
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash].css'
    })
  ],
  mode: process.env.NODE_ENV || 'development'
};

Key Notes for Success #

• Pug Handling: The root option in pug-html-loader lets you import partials like include partials/header.pug without typing full paths.
• Auto-Injection: You don't need to manually add <script> or <link> tags in your Pug template—HtmlWebpackPlugin will inject the compiled JS and CSS automatically.
• Production vs Development: The config uses MiniCssExtractPlugin for production (to create separate CSS files) and style-loader for development (faster hot reloading).
• Caching: The [contenthash] in filenames ensures users get fresh assets when you update code.

Verify the Build #

Run npm run build (make sure you have a build script in package.json like "build": "webpack --mode production"). You should see:

• index.html at your repo root
• A js/ folder with your compiled JavaScript
• A css/ folder with your compiled CSS
• Your image assets in assets/images/ (as before)

This setup will work seamlessly with Netlify, as it can directly serve the root index.html and all linked assets.

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