Webpack编译SCSS生成多余JS文件，如何解决？

问题描述 #

编译SCSS文件（例如/styles/rapid.scss）时，除了生成对应的/styles/rapid.css文件，还会额外生成/styles/rapid.js文件，需要移除这些不必要的JS文件。

原因分析 #

当前配置将SCSS文件直接作为Webpack的entry入口。Webpack本质是JS模块打包工具，每个entry都会生成对应的JS bundle——即便该入口最终通过MiniCssExtractPlugin提取出了CSS，也会残留一个空的JS文件。

解决方案 #

使用webpack-fix-style-only-entries插件，它会自动识别仅输出CSS的入口，并移除对应的空JS文件。

步骤1：安装插件 #

npm install webpack-fix-style-only-entries --save-dev

步骤2：修改Webpack生产环境配置 #

编辑webpack.prod.js：

1. 在文件顶部引入插件：

const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');

2. 在plugins数组中添加该插件：

plugins: [
  // Extracts CSS into separate files
  new MiniCssExtractPlugin({
    filename: '[name].css',
    chunkFilename: '[id].css',
  }),
  // 移除仅输出CSS的入口对应的JS文件
  new FixStyleOnlyEntriesPlugin()
],

可选：调整优化配置 #

如果不需要单独拆分CSS chunk，可以简化optimization.splitChunks中的styles缓存组配置，但插件本身不依赖该配置，保留原有设置也能正常工作。

验证 #

重新执行生产环境编译命令，此时SCSS文件只会生成对应的CSS文件，不会再额外生成JS文件。

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