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

Question

我找到了一个带有多个入口点和UMD的webpack 库选项的示例

这是示例中的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"
      }
    },

]

相关文档：导出多个配置

Answer 2

你可以像这样设置名称

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