Webpack是否有类似function类型的libraryTarget配置？

嘿，我完全懂你的需求！现在你用libraryTarget: 'var'配置后，Webpack会把编译后的函数赋值给一个全局变量（比如window.MyLibrary），但你想要的是这个变量直接对应函数执行后的返回值，而不是函数本身对吧？

下面给你两种简单可行的解决方案：

方案1：修改入口文件，直接导出函数执行结果 #

如果你的核心逻辑是封装在一个函数里，那最简单的方式就是在入口文件里直接执行这个函数，然后导出结果：

// src/index.js
// 你的核心函数
function myLibraryCore() {
  // 这里写你的库逻辑
  return {
    sayHi: () => console.log('Hello from my library!'),
    doStuff: () => console.log('Doing some stuff...')
  };
}

// 执行函数并导出结果，而不是导出函数本身
export default myLibraryCore();

然后保持你的Webpack配置基本不变，或者把libraryTarget换成window更明确：

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'mylibrary.js',
    library: 'MyLibrary',
    libraryTarget: 'var' // 或者用 'window' 效果一致
  }
};

这样编译后，生成的代码会是类似这样：

var MyLibrary = (function(e){/* Webpack包裹代码 */})();

在网页引入后，window.MyLibrary直接就是你函数执行后的返回值，不用再手动调用MyLibrary()了。

方案2：通过Webpack配置生成立即执行函数 #

如果你不想修改入口文件的代码，也可以直接通过Webpack的output配置来实现：

// webpack.config.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'mylibrary.js',
    // 配置library为立即执行函数类型
    library: {
      name: 'MyLibrary',
      type: 'iife'
    }
  }
};

用iife类型的library后，Webpack会自动把你的模块包裹成一个立即执行函数，编译后的代码结构大概是：

var MyLibrary = (function() {
  /* Webpack的模块包裹逻辑 */
  return /* 你的函数返回值 */;
})();

这样引入后，window.MyLibrary同样直接是函数执行后的结果，完美符合你的需求。

要是你完全不想有变量赋值（虽然这种情况在网页里引入后没法直接访问结果，除非结果本身是全局变量），可以试试library: ''配合libraryTarget: 'assign'，但这种方式容易污染全局环境，不太推荐。

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