Webpack 4结合MiniCssExtractPlugin构建CSS/SASS生成多余JS文件的咨询

你遇到的这个情况其实是Webpack核心设计逻辑导致的——Webpack本质是JavaScript模块打包工具，它的整个打包流程都是围绕JS模块展开的。哪怕你直接把CSS/SASS设为入口，Webpack依然会生成一个对应的JS chunk来承载模块的基础逻辑（哪怕这个JS文件里没有实际业务代码）。

一、官方依然推荐从JS中导入CSS的方式 #

没错，那些Stack Overflow旧问题里的建议并没有过时，从JS导入CSS依然是最符合Webpack“模块依赖”理念的方案。原因很简单：

• Webpack的模块系统能帮你更好地管理样式与页面/组件的依赖关系，比如某个组件的样式只在该组件被导入时才会被打包；
• 更方便实现按需加载、代码分割等进阶功能，比如路由级别的样式拆分；
• 能配合css-loader的模块功能（比如CSS Modules）实现样式的作用域隔离。

如果可以调整项目结构，我还是建议你创建一个简单的JS入口文件，在其中导入你的SASS文件，比如：

// style-entry.js
import './styles/main.scss';

然后把这个JS文件设为Webpack的入口，这样生成的JS文件虽然存在，但它只是一个模块的入口载体，不会有冗余代码，同时也符合Webpack的设计规范。

二、如果一定要直接以CSS为入口，如何移除多余JS文件 #

如果你坚持要把CSS/SASS作为直接入口，可以通过以下方案解决多余JS文件的问题：

方案1：使用webpack-remove-empty-assets插件

这个插件会自动识别并移除打包后内容为空的JS文件，配置步骤如下：

1. 安装插件：

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

2. 在Webpack配置文件中添加插件：

const RemoveEmptyAssetsPlugin = require('webpack-remove-empty-assets');

module.exports = {
  // ...其他配置
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    }),
    new RemoveEmptyAssetsPlugin()
  ]
};

这样打包后，那些无内容的多余JS文件就会被自动清理掉。

方案2：使用ignore-emit-webpack-plugin插件

另一个类似的插件是ignore-emit-webpack-plugin，可以指定忽略特定类型的文件：

1. 安装插件：

npm install ignore-emit-webpack-plugin --save-dev

2. 配置Webpack：

const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    }),
    new IgnoreEmitPlugin(/\.js$/) // 忽略所有JS文件
  ]
};

不过这个方案要注意：如果你的项目中还有其他需要保留的JS入口，这种全局忽略会有问题，需要更精准的匹配规则。

总结 #

如果是长期维护的项目，优先选择从JS导入CSS的官方方案，它能更好地发挥Webpack的模块管理能力；如果只是临时场景或特殊需求，可以用插件来移除多余的空JS文件。

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