Library 的打包

webpack默认打包之后的代码形式是这样的（假设我导出 module.exports = 'hello world' ）

(function () {
  return 'hello world'
})()

 

注意：代码是一个自执行函数，外界想获取函数里面的返回值怎么办（也就是模块的导出结果 hello world ），那么就需要配置一个 library 

复制代码
const path = require('path')

module.exports = {
  entry: './src/utils.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    library: 'result'
  }
}
复制代码

 

然后打包之后是这样的形式

var result = (function () {
  return 'hello world'
})()

 

通过把导出的结果赋值给 result 变量，配置了 library: 'result' 

 

将打包之后的文件引入到HTML文件中，可以直接使用哦！（假设打包的文件名是bundle.js）

<body>
  <script src="./dist/bundle.js"></script>
  <script>
    console.log(result)
  </script>
</body>

 

如果你不想在HTML中使用，想在一个JS文件里面通过 require 导入来使用，需要这么配置

复制代码
const path = require('path')

module.exports = {
  entry: './src/utils.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    libraryTarget: 'commonjs2'
  }
}
复制代码

 

打包之后代码是这样的

module.exports = (function () {
  return 'hello world'
})()

 

可以在JS文件中导入来使用

import result from './bundle'

console.log(result)

同时支持import和require语法引入

 

两个配置同时使用，生效的是第二种模式。

posted @   磊~~  阅读(95)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示