Webpack 4 Less配置求助：仅编译指定文件并保留路径

嘿，我来帮你搞定这个Webpack配置的问题！针对你的疑问，我分点给你说明：

1. 是否必须设置.js入口文件？ #

当然不需要！Webpack 完全支持把非JS文件直接作为入口，尤其是在你只需要处理Less这类样式文件的场景下。你完全可以跳过空的JS入口文件，直接把目标Less文件配置成入口，甚至可以自动批量匹配所有符合规则的文件，效率更高。

2. 实现需求的具体配置方案 #

要达成「只编译.src.less后缀的文件，同时保留原路径输出到dist目录」的需求，你可以按照下面的步骤修改配置：

第一步：安装辅助依赖 #

先装个glob模块，它能帮我们快速匹配所有符合规则的文件：

npm install glob --save-dev

第二步：修改Webpack配置文件 #

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

// 自动抓取www目录下所有.src.less文件
const entryMap = glob.sync('./www/**/*.src.less').reduce((entryObj, filePath) => {
  // 生成对应的入口key：去掉www前缀和.src.less后缀，保留原路径结构
  const entryKey = filePath.replace('./www/', '').replace('.src.less', '');
  entryObj[entryKey] = filePath;
  return entryObj;
}, {});

module.exports = {
  mode: 'development',
  entry: entryMap, // 用匹配到的Less文件直接作为入口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js', // 这里会生成空的JS bundle，不用管它，我们重点看CSS输出
  },
  module: {
    rules: [
      {
        test: /\.src\.less$/, // 精准匹配只有.src.less后缀的文件
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "less-loader"
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      // 按照原路径结构输出CSS文件
      filename: '[name].css',
    })
  ]
};

配置解释 #

• 自动匹配入口：用glob.sync('./www/**/*.src.less')扫遍www下所有符合要求的Less文件，然后把每个文件的路径转换成对应的入口key（比如www/css/folder/some.src.less会变成css/folder/some），这样就能保留原有的目录结构。
• 精准规则匹配：把test改成/\.src\.less$/，确保Webpack只处理你指定后缀的文件，不会误编译其他.less文件。
• 保留路径输出：MiniCssExtractPlugin的filename设为[name].css，结合前面的入口key，最终会在dist目录下生成和原文件完全一致的路径结构，比如dist/css/folder/some.css、dist/cssOther/t.css。

这样配置后，就能完美实现你想要的效果啦！

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