如何用Webpack将多个Less文件编译为独立CSS文件？

没问题，要实现把两个Less文件分别打包成独立的home.css和dashboard.css，核心是要为每个目标CSS文件创建单独的ExtractTextPlugin实例，再针对性配置规则。下面是完整的解决方案：

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

// 为每个要生成的CSS文件创建专属的ExtractTextPlugin实例
const extractHomeStyles = new ExtractTextPlugin({
  filename: 'home.css'
});
const extractDashboardStyles = new ExtractTextPlugin({
  filename: 'dashboard.css'
});

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      // 专门处理home.less的规则
      {
        test: /home\.less$/,
        use: extractHomeStyles.extract({
          // 先编译Less为CSS，再解析CSS
          use: ['css-loader', 'less-loader'],
          // 开发环境下如果不提取CSS，就用style-loader把样式注入页面
          fallback: 'style-loader'
        })
      },
      // 专门处理dashboard.less的规则
      {
        test: /dashboard\.less$/,
        use: extractDashboardStyles.extract({
          use: ['css-loader', 'less-loader'],
          fallback: 'style-loader'
        })
      }
    ]
  },
  plugins: [
    // 别忘了把两个插件实例加入到plugins数组里
    extractHomeStyles,
    extractDashboardStyles
  ]
};

• 多个ExtractTextPlugin实例：这个插件的每个实例只能负责生成一个CSS文件，所以要输出两个独立文件，必须创建两个实例分别指定输出文件名。
• 精准匹配文件：用test: /home\.less$/和test: /dashboard\.less$/精准匹配目标文件，避免其他Less文件被错误归类处理。
• loader顺序：Webpack的loader是从右到左执行的，所以这里先执行less-loader把Less编译成CSS，再用css-loader解析CSS语法。
• fallback选项：这是开发环境的备选方案，如果不想提取CSS到单独文件，而是直接把样式注入到页面的<style>标签里，style-loader就会生效，方便开发调试。

执行Webpack打包后，你会在dist目录下得到bundle.js、home.css和dashboard.css三个文件，完全符合你的需求。

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