Webpack输出文件扩展名异常：生成style.min.css.js问题咨询

你的问题主要出在两个核心点：Webpack对entry chunk的默认处理逻辑，以及占位符的适用范围，还有CSS提取插件的配置缺失。

为什么会生成style.min.css.js？ #

Webpack本质是模块打包工具，默认所有entry都被当作JS模块处理。你把style.min指向SCSS文件后，Webpack会先将这个SCSS编译成一个包含CSS注入逻辑的JS模块；虽然你的CSS提取插件会把CSS内容提取出来，但Webpack本身仍会为这个entry生成对应的JS chunk。

如果插件没有明确配置输出文件名，它可能默认用chunk名称加.css命名CSS文件，而Webpack的output.filename: '[name].js'又会给这个JS chunk加上.js后缀，两者叠加就出现了style.min.css.js这种混乱的文件名。

为什么[file].[ext]作为输出文件名会失效？ #

[file]和[ext]是**asset资源模块（比如图片、字体等静态文件）**专属的占位符，并不适用于entry对应的JS chunk。对于entry chunk，Webpack只识别[name]、[id]、[contenthash]这类chunk相关的占位符，所以当你把output.filename设为[file].[ext]时，Webpack无法解析这些未定义的占位符，就会原样输出字符串，导致JS文件出现[ext]这种字面量扩展名。

修正后的配置方案 #

我推荐使用官方当前推荐的mini-css-extract-plugin（ExtractTextPlugin已被废弃）处理CSS提取，同时调整配置逻辑避免多余的JS文件：

1. 安装依赖 #

npm install mini-css-extract-plugin --save-dev

2. 修改Webpack配置 #

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: { 
    "logic": './foo/logic.js', 
    "logic.min": './foo/logic.js'
  }, 
  watch: true, 
  devtool: 'source-map', 
  output: { 
    path: path.resolve(__dirname, 'dist'), // 修正路径：原配置的`/dist`会被解析为系统根目录的dist，改用相对路径更合理
    filename: '[name].js' 
  },
  plugins: [
    // 配置CSS提取的输出文件名
    new MiniCssExtractPlugin({
      filename: 'style.min.css'
    })
  ],
  module: { 
    rules: [ 
      { 
        test: /\.jsx?$/i, 
        loader: 'babel-loader', 
        options: { 
          presets: ['es2015'], 
          minified: true 
        } 
      }, 
      { 
        test: /\.(scss|css)$/, 
        use: [
          MiniCssExtractPlugin.loader, // 替换原有的extractSass.extract
          {
            loader: "css-loader", 
            options: { minimize: true }
          }, 
          { loader: "sass-loader" }
        ]
      }, 
    ], 
  },
};

3. 调整SCSS的引入方式 #

在你的logic.js（或对应JS入口文件）中导入SCSS：

// logic.js
import './style.scss';

这样做的好处：

• 无需将SCSS作为单独entry，避免生成多余的空JS文件
• CSS会被正确提取为style.min.css，JS文件正常输出为logic.js和logic.min.js
• 模块依赖关系更清晰，符合Webpack的设计逻辑

如果你坚持要把SCSS作为单独entry，可以保留原entry配置，同时补充插件和优化配置：

// 插件配置调整
new MiniCssExtractPlugin({
  filename: '[name].css' // 对应entry中的`style.min`，生成style.min.css
}),
// 新增optimization配置，移除空JS chunk
optimization: {
  splitChunks: {
    cacheGroups: {
      styles: {
        name: 'style.min',
        test: /\.scss$/,
        chunks: 'all',
        enforce: true
      }
    }
  }
}

这样就能确保只生成你需要的logic.js、logic.min.js、style.min.css以及对应的源映射文件。

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