webpack - 具有多个入口点的动态库选项

Question

我找到一个webpack library option with multiple entry points and UMD的示例

这是示例中的webpack.config.js：

var path = require("path");
module.exports = {
    entry: {
        alpha: "./alpha",
        beta: "./beta"
    },
    output: {
        path: path.join(__dirname, "js"),
        filename: "MyLibrary.[name].js",
        library: ["MyLibrary", "[name]"],
        libraryTarget: "umd"
    }
}

我的问题是如何动态配置 filename和 library。我想要的是：


filename项 alpha为 a.js
filename项 beta为 b.js
library项 alpha为 Alpha
library，条目 beta为 Beta。


所以我想知道是否可以通过 function像这样配置这些选项：

var path = require("path");
module.exports = {
    entry: {
        alpha: "./alpha",
        beta: "./beta"
    },
    output: {
        path: path.join(__dirname, "js"),
        filename: function(entryKey, entryValue) {
            if (entryKey === 'alpha') return 'a.js';
            if (entryKey === 'beta') return 'b.js';
        },
        library: function(entryKey, entryValue) {
            if (entryKey === 'alpha') return 'Alpha';
            if (entryKey === 'beta') return 'Beta';
        },
        libraryTarget: "umd"
    }
}

Answer 1

从webpack 3.1.0，您可以从webpack.config.js导出多个配置

因此，您可以尝试以下操作：

  module.exports = [
    {
      entry: "./alpha",
      output: {
          path: path.join(__dirname, "js"),
          filename: "a.js",
          library: "Alpha",
          libraryTarget: "umd"
      }
    },
    {
      entry: "./beta",
      output: {
          path: path.join(__dirname, "js"),
          filename: "b.js",
          library: "Beta",
          libraryTarget: "umd"
      }
    },

]

相关文档： Exporting multiple configurations