使用Webpack提取CSS时如何抑制JS模块输出？

这个问题我之前也碰到过，核心原因是Webpack的入口处理逻辑：当你把.scss文件直接设为entry时，哪怕所有样式都被mini-css-extract-plugin提取成独立CSS文件了，Webpack还是会生成一个包含基础运行时代码的空JS文件。下面给你两个靠谱的解决办法：

方法1：使用webpack-remove-empty-scripts插件（推荐） #

这个插件是专门用来清理Webpack生成的空脚本文件的，对Webpack 4兼容性很好，比你之前尝试的suppress-chunks-webpack-plugin更可靠。

步骤： #

1. 先安装插件：

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

2. 修改你的Webpack配置，引入并添加这个插件：

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

module.exports = {
  entry: { 
    'styles': './sass/styles.scss',
    // 你的其他入口文件...
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      },
      // 其他loader规则...
    ]
  },
  plugins: [
    new RemoveEmptyScriptsPlugin(), // 位置在MiniCssExtractPlugin前后都可以
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
      chunkFilename: "[id].css"
    }),
    // 其他插件...
  ],
  output: {
    filename: 'js/[name].bundle.js',
  }
};

配置完成后重新编译，你会发现css/styles.css正常生成，而冗余的js/styles.bundle.js会被自动移除。

方法2：调整入口结构（无需额外插件） #

如果你不想新增插件依赖，可以换一种方式定义入口：

1. 创建一个空的JS文件（比如src/style-entry.js），里面只导入你的SCSS文件：

import '../sass/styles.scss';

2. 修改Webpack的entry配置，把这个JS文件设为入口：

entry: { 
  'styles': './src/style-entry.js',
  // 你的其他入口...
},

不过这种方法会生成一个极小的JS文件（只包含导入逻辑的编译结果），如果想要完全消除这个文件，还是推荐第一种插件方案。

为什么之前的suppress-chunks-webpack-plugin失败？ #

大概率是插件版本和Webpack 4不兼容，或者配置时误抑制了所有chunk的生成，导致CSS和JS都没输出。而webpack-remove-empty-scripts是专门针对这种空脚本场景设计的，逻辑更精准，兼容性也更好。

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