如何用Webpack实现简洁的Sass转CSS编译并避免冗余文件？

直接上可复用的配置方案，解决你提到的冗余JS文件问题，同时兼顾JS和Sass的编译需求：

完整配置示例 #

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const glob = require('glob'); // 可选，用于自动扫描入口文件

// 自动扫描JS入口（无需手动逐个添加）
const jsEntries = glob.sync('./src/js/*.js').reduce((entries, filePath) => {
  const entryName = filePath.split('/').pop().replace('.js', '');
  entries[entryName] = filePath;
  return entries;
}, {});

// 自动扫描Sass入口（无需手动逐个添加）
const sassEntries = glob.sync('./src/scss/*.scss').reduce((entries, filePath) => {
  const entryName = filePath.split('/').pop().replace('.scss', '');
  entries[entryName] = filePath;
  return entries;
}, {});

module.exports = {
  entry: { ...jsEntries, ...sassEntries },
  output: {
    filename: 'js/[name].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true // 构建前清空dist目录，避免冗余文件
  },
  module: {
    rules: [
      // JS编译（按需配置，比如Babel转译）
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      // Sass转CSS并提取为单独文件
      {
        test: /\.(s[ac]ss|css)$/,
        use: [
          MiniCssExtractPlugin.loader, // 提取CSS到单独文件
          'css-loader', // 解析CSS模块
          'sass-loader' // 编译Sass为CSS
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].css' // CSS输出到dist/css目录
    }),
    // 自定义钩子：删除Sass入口生成的冗余JS文件
    {
      apply: (compiler) => {
        compiler.hooks.emit.tap('RemoveSassEntryJS', (compilation) => {
          // 遍历所有输出资源，删除Sass入口对应的JS文件
          Object.keys(compilation.assets).forEach(assetPath => {
            const entryName = assetPath.replace('js/', '').replace('.js', '');
            // 判断该entry是否来自Sass文件
            if (sassEntries[entryName]) {
              delete compilation.assets[assetPath];
            }
          });
        });
      }
    }
  ],
  optimization: {
    minimize: true,
    minimizer: [
      // 仅压缩JS入口的文件，跳过已被删除的Sass冗余JS
      new TerserPlugin({
        exclude: Object.keys(sassEntries).map(name => new RegExp(`${name}\\.js$`))
      })
    ]
  }
};

关键配置说明 #

1. 自动入口扫描：用glob自动遍历指定目录下的JS和Sass文件，无需手动维护入口列表，适合多文件场景。
2. CSS提取：通过MiniCssExtractPlugin直接将Sass编译结果输出为独立CSS文件，指定到dist/css目录。
3. 冗余JS清理：利用webpack的emit钩子，在输出文件前自动删除Sass入口对应的空JS文件，无需手动排除。
4. JS压缩优化：配置TerserPlugin仅压缩真正的JS入口文件，避免无效操作。

为什么之前流程繁琐？ #

Webpack本质是模块打包器，所有文件（包括Sass）都会被当作模块处理，默认会生成对应的JS模块文件（用于加载CSS）。使用MiniCssExtractPlugin后，这些JS模块失去作用，所以需要额外步骤清理——这个配置已经把清理逻辑自动化了，无需手动操作。

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