Webpack多入口场景下使用[name]配置output.library遇阻求助

我之前也踩过这个坑！Webpack的output.library并不像filename那样直接支持[name]占位符解析——直接写library: '[name]'的话，它会把[name]当成字面量字符串输出，而不是替换成你的入口名称（比如ng、Rx）。之前你试的数组形式['[name]']也不对，因为数组形式是用来定义嵌套命名空间的（比如['MyLib', 'Core']会生成MyLib.Core这样的全局变量），不是用来处理占位符的。

给你两个可行的解决方案：

方案一：使用函数式的output.library（推荐，Webpack 5+适用） #

Webpack允许output.library接收一个函数，参数里包含当前chunk的信息，我们可以直接取chunk.name作为library名称：

const path = require('path');

module.exports = {
  entry: {
    ng: './prod/angular.js',
    Rx: './prod/rxjs.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    // 用chunk.name直接拿到入口的名称（ng/Rx）
    library: (chunk) => chunk.name,
    libraryTarget: 'umd',
    umdNamedDefine: true
  }
};

这个配置会自动给每个入口生成对应的library名称，和filename的[name]效果完全一致。

方案二：拆分多配置（兼容Webpack 4及更早版本） #

如果你的Webpack版本不支持函数式library配置，可以把每个入口拆成独立的Webpack配置，用webpack-merge来复用基础配置：

首先安装webpack-merge：

npm install webpack-merge --save-dev

然后修改配置文件：

const path = require('path');
const { merge } = require('webpack-merge');

// 基础配置，提取公共部分
const baseConfig = {
  output: {
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'umd',
    umdNamedDefine: true
  }
};

// 遍历入口，生成每个入口的独立配置
const entryConfigs = Object.entries({
  ng: './prod/angular.js',
  Rx: './prod/rxjs.js'
}).map(([entryName, entryPath]) => {
  return merge(baseConfig, {
    entry: { [entryName]: entryPath },
    output: {
      filename: `${entryName}.js`,
      library: entryName // 直接用入口名称作为library
    }
  });
});

// 导出多配置数组
module.exports = entryConfigs;

这样Webpack会分别处理每个入口配置，每个输出文件的library名称就是对应的入口名，完美解决你的问题。

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