Webpack输出冗余文件问题：如何仅生成指定目标文件？

问题根源 #

• Webpack 本质是 JS 模块打包工具，把 SCSS 文件作为入口时，提取完 CSS 后会残留一个空 JS 文件，这是它的默认处理逻辑。
• 你配置的 MiniCssExtractPlugin 会对所有入口 chunk 生成 CSS 文件，哪怕 index 这个 JS 入口没有引入任何样式，也会产出空的 index.css。

解决步骤 #

1. 安装插件清理空JS文件
   用 webpack-remove-empty-scripts 自动删除SCSS入口生成的无用空JS，先执行安装命令：

   npm install webpack-remove-empty-scripts --save-dev
   

2. 调整配置避免冗余CSS生成
   修改插件规则，只给 edit 和 style 这两个SCSS入口生成CSS，跳过index入口。完整配置如下：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');

module.exports = {
  entry: {
    index: './src/js/index.es6.js',
    edit: './src/scss/edit.scss',
    style: './src/scss/style.scss'
  },
  mode: 'development',
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      },
      {
        test: /\.svg$/,
        loader: 'file-loader'
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          },
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new RemoveEmptyScriptsPlugin(),
    new MiniCssExtractPlugin({
      filename: (pathData) => {
        // 仅为edit和style入口生成CSS文件
        return ['edit', 'style'].includes(pathData.chunk.name) ? `${pathData.chunk.name}.css` : undefined;
      }
    })
  ],
  devtool: 'source-map'
};

验证结果 #

重新执行构建命令后，dist 目录只会生成你需要的目标文件：

• /dist/index.js
• /dist/edit.css
• /dist/style.css

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