Webpack中如何将Less文件编译为CSS并输出到public目录

• 你的配置存在两个核心错误：
  • loader执行顺序错误：webpack的use数组中loader执行顺序为从右到左，你把file-loader放在了第一位，执行逻辑完全颠倒
  • 冗余配置冲突：MiniCssExtractPlugin本身就具备提取CSS并输出为独立文件的能力，不需要额外搭配file-loader使用，二者同时调用会导致输出内容异常

1. 首先确认已安装所有必要依赖：

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

2. 修改webpack配置中的less处理规则，移除冗余的file-loader：

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

module.exports = {
  // 其余基础配置省略
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader, // 第一步：提取解析完成的CSS为独立文件
          'css-loader', // 第二步：解析CSS中的依赖关系
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                javascriptEnabled: true
              }
            }
          } // 第三步：先将Less编译为标准CSS
        ]
      }
    ]
  },
  plugins: [
    // 配置MiniCssExtractPlugin插件，指定输出路径
    new MiniCssExtractPlugin({
      // 按需调整路径：如果你的output.path默认输出到dist目录，要输出到项目根目录的public可改为`../public/[name].css`
      filename: 'public/[name].css',
      chunkFilename: 'public/[id].css'
    })
  ]
}

• 路径配置需要结合你的项目output.path参数调整相对路径，确保最终输出的CSS文件落在你期望的public目录下
• webpack只会处理你在业务代码中主动import的Less文件，未被引入的Less文件不会被编译输出
• 开发环境使用webpack-dev-server时文件会暂存在内存中，不会写入本地磁盘，执行生产构建命令后会在目标路径生成实际的CSS文件

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