兄弟，我来帮你捋捋这个问题！你现在的核心问题应该是loader的配置没有和ExtractTextPlugin正确结合，导致Webpack把编译后的CSS打包成了CommonJS模块，插件自然没法提取出来。结合你给出的代码片段，我整理了几个关键问题和解决方案：

1. 最核心的问题：Loader配置逻辑错误 #

Webpack的loader是从右到左执行的，处理LESS必须按「less-loader → css-loader → 提取插件」的顺序串联，而且必须用ExtractTextPlugin.extract()方法来包裹css-loader和less-loader，否则CSS会被转成CommonJS格式的JS代码注入到页面，插件根本没法提取。

正确的配置示例（ExtractTextPlugin版） #

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

// 初始化插件，指定输出的CSS文件名（这里不能是"..."，要填实际路径）
const extractLess = new ExtractTextPlugin({
  filename: "css/[name].[contenthash].css",
  // 开发环境可以禁用插件，用style-loader把CSS注入到页面，方便热更新
  disable: process.env.NODE_ENV === "development"
});

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        // 用extract方法包裹loader，替代直接使用style-loader
        use: extractLess.extract({
          fallback: "style-loader", // 插件禁用时的降级方案
          use: [
            "css-loader", // 解析CSS中的@import、url()等语法
            "less-loader" // 把LESS编译成CSS
          ]
        })
      }
    ]
  },
  plugins: [
    extractLess // 别忘了把插件加入plugins数组
  ]
};

2. 版本兼容问题：Webpack4+推荐换用mini-css-extract-plugin #

ExtractTextPlugin在Webpack 4及更高版本中已经不再被官方推荐维护了，容易出现各种兼容问题（比如你遇到的CommonJS提取失败）。如果你的Webpack版本是4+，强烈建议换成mini-css-extract-plugin，配置更简单也更稳定：

mini-css-extract-plugin配置示例 #

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader, // 直接用这个loader替代ExtractTextPlugin的extract方法
          "css-loader",
          "less-loader"
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "css/[name].[contenthash].css"
    })
  ]
};

3. 小细节：filename不能留空占位符 #

你代码里的filename: "..."是无效的，必须指定实际的输出路径和文件名，比如"css/main.css"或者带哈希值的"css/[name].[contenthash].css"（用于缓存优化）。

最后检查依赖是否安装完整 #

确保你已经安装了所有需要的依赖：

• 用ExtractTextPlugin的话：npm install less less-loader css-loader style-loader extract-text-webpack-plugin --save-dev
• 用mini-css-extract-plugin的话：npm install less less-loader css-loader mini-css-extract-plugin --save-dev

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