认识

2024年11月23日

柏拉文

越努力，越幸运

一、认识

---

output.library 输出一个库，为你的入口做导出。

二、语法

---

2.1 String Entry

module.exports = {
  entry: './src/index.js',
  output: {
    library: 'MyLibrary',
  }
};

假设你在 src/index.js 的入口中导出了如下函数：

export function hello(name) {
  console.log(`hello ${name}`);
}

此时，变量 MyLibrary 将与你的入口文件所导出的文件进行绑定，下面是如何使用 webpack 构建的库的实现：

<script src="https://example.org/path/to/my-library.js"></script>
<script>
  MyLibrary.hello('webpack');
</script>

2.2 Array Entry

如果你将 entry 设置为一个 array，那么只有数组中的最后一个会被暴露。

语法

module.exports = {
  entry: ['./src/a.js', './src/b.js'], // 只有在 b.js 中导出的内容才会被暴露
  output: {
    library: 'MyLibrary',
  },
};

2.3 Object Entry

如果你将 entry 设置为一个 object，所以入口都可以通过 library 的 array 语法暴露

module.exports = {
  entry: {
    a: './src/a.js',
    b: './src/b.js',
  },
  output: {
    filename: '[name].js',
    library: ['MyLibrary', '[name]'], // name is a placeholder here
  },
};

假设 a.js 与 b.js 导出名为 hello 的函数，这就是如何使用这些库的方法：

<script src="https://example.org/path/to/a.js"></script>
<script src="https://example.org/path/to/b.js"></script>
<script>
  MyLibrary.a.hello('webpack');
  MyLibrary.b.hello('webpack');
</script>

请注意，如果你打算在每个入口点配置 library 配置项的话，语法如下:

module.exports = {
  // …
  entry: {
    main: {
      import: './src/index.js',
      library: {
        name: 'MyLibrary',
        type: 'umd',
        umdNamedDefine: true,
      },
    },
    another: {
      import: './src/another.js',
      library: {
        name: 'AnotherLibrary',
        type: 'commonjs2',
      },
    },
  },
};