Webpack 4.1.1如何导出目录并支持按路径导入模块？

针对你的需求（Webpack 4.1.1环境，^lib设为外部模块，希望通过路径而非模块对象访问子模块），这里有几个可行的落地方案，结合你的场景推荐优先尝试第一个：

方案1：自动生成多入口构建 + 外部模块映射 #

这个方案能让每个子模块单独成为可导入的单元，完美匹配你“通过路径导入”的需求：

步骤1：写脚本自动生成Webpack多入口配置 #

你可以用Node脚本递归遍历lib目录，自动生成对应每个子模块的入口，避免手动维护。比如创建generate-entry.js：

const fs = require('fs');
const path = require('path');

const libDir = path.resolve(__dirname, 'lib');
const entryMap = {};

// 递归遍历目录生成入口
function scanDir(currentDir, relativePath = '') {
  const files = fs.readdirSync(currentDir);
  files.forEach(file => {
    const fullPath = path.join(currentDir, file);
    const stats = fs.statSync(fullPath);
    
    if (stats.isDirectory()) {
      scanDir(fullPath, path.join(relativePath, file));
    } else if (file.endsWith('.js')) {
      // 生成入口名称（比如lib/utils/helper.js -> utils/helper）
      const entryName = path.join(relativePath, file.replace('.js', ''));
      entryMap[entryName] = fullPath;
    }
  });
}

scanDir(libDir);
// 把入口配置写入JSON文件，供Webpack读取
fs.writeFileSync(path.resolve(__dirname, 'entry-config.json'), JSON.stringify(entryMap, null, 2));

步骤2：调整Webpack库构建配置 #

在你的库项目的webpack.config.js中，读取自动生成的入口，并配置输出格式：

const path = require('path');
const entryMap = require('./entry-config.json');

module.exports = {
  entry: entryMap,
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js', // 输出文件路径和源目录结构一致
    libraryTarget: 'commonjs2', // 适配CommonJS环境，也可以用umd兼容更多场景
    library: '[name]', // 每个子模块作为独立库导出
  },
  // 其他loader、插件配置...
};

构建后，dist目录会和lib的结构完全对应，每个子模块都有单独的bundle文件。

步骤3：在应用的Webpack中配置外部模块 #

在消费这个库的应用的webpack.config.js里，添加正则匹配的外部模块规则：

module.exports = {
  // ...其他配置
  externals: [
    function(context, request, callback) {
      // 匹配所有^lib开头的路径，标记为外部模块
      if (/^lib\/.+$/.test(request)) {
        return callback(null, `commonjs2 ${request}`);
      }
      callback();
    }
  ],
  resolve: {
    alias: {
      // 让应用能解析^lib路径到构建后的库目录
      '^lib': path.resolve(__dirname, '../path/to/your/lib/dist'),
    }
  }
};

这样你就能在应用中直接写：

import helper from '^lib/utils/helper';
import authService from '^lib/auth/index';

完全符合你的需求。

方案2：利用别名映射 + 外部模块排除 #

如果不想生成多个bundle，也可以通过Webpack的别名直接映射源文件，并排除打包：
在应用的Webpack配置中：

module.exports = {
  resolve: {
    alias: {
      '^lib': path.resolve(__dirname, '../path/to/your/lib/src'),
    },
    modules: [path.resolve(__dirname, '../path/to/your/lib/src'), 'node_modules'],
  },
  externals: [
    /^lib\/.+$/, // 所有^lib下的模块都作为外部模块，不打包进应用
  ]
};

这种方式更轻量，但要求你的库源码本身支持直接导入（每个子模块都有独立的export语句，而非通过一个全局对象导出）。

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