Wsh's blog Wsh's blog
首页
  • 基础知识
  • ArkUI
  • UIAbility
  • 组件通信方式
  • 前端缓存
  • React
  • typescript
  • javascript
  • flutter
  • node
  • webpack
web3D😉
宝库📰
  • 分类
  • 标签
  • 归档
龙哥的大🐂之路 (opens new window)
GitHub (opens new window)

wsh

热爱前端的程序媛
首页
  • 基础知识
  • ArkUI
  • UIAbility
  • 组件通信方式
  • 前端缓存
  • React
  • typescript
  • javascript
  • flutter
  • node
  • webpack
web3D😉
宝库📰
  • 分类
  • 标签
  • 归档
龙哥的大🐂之路 (opens new window)
GitHub (opens new window)
  • 主要功能
  • 核心概念
  • tree shaking
  • 模块联邦
  • 热更新机制
  • 构建速度和体积优化
  • 打包原理
  • 自定义plugin/loader
  • webpack
2022-05-29
目录

打包组件和基础库

# 1. 如何将库暴露出去

  • library: 指定库的全局变量
  • libraryTarget: ⽀持库引⼊的⽅式
  • libraryExport (opens new window): 指定哪一个导出应该被暴露为一个库。
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  entry: {
    "large-number": "./src/index.js",
    "large-number.min": "./src/index.js",
  },
  output: {
    filename: "[name].js",
    library: {
      name: "largeNumber",
      type: "umd",
      export: "default",
      umdNamedDefine: true,
    },
  },
  mode: "none",
  optimization: {
    minimize: true,
    minimizer: [
      // 自定义压缩函数
      // 通过 include 设置只压缩 min.js 结尾的⽂件
      new TerserPlugin({
        include: /\.min\.js$/,
      }),
    ],
  },
};
#webpack
最近更新
01
组件通信方式
01-07
02
UIAbility
01-07
03
ATKTS
01-06
更多文章>
Theme by Vdoing | Copyright © 2022-2025 Wsh | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式