• webpack除了可以打包应用，也可以用来打包js库

• 实现一个大整数加法库的打包

  • 需要打包压缩版和非压缩版
  • 支持AMD/CJS/ESM 模块引入

    库的目录结构和打包要求

    打包输出的库名称

• 未压缩版 large-number.js

• 压缩版 large-number.min.js

  |-dist |-large-number.js |-large-number.min.js |-src |-index.js
  |-index.js |-webpack.config.js |-package.json

支持的引入方式

• 支持ES module
• 支持 CJS
• 支持 AMD

• 可以直接通过<script>引入

  如何将库暴露出去

• webpack.config.js在output中在参数

  • library：指定库的全局变量
  • libraryTarget：支持库引入在方式

    webpack.config.js与package.json

• 安装包：npm i terser-webpack-plugin -D

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin)
module.exports = {
  mode: 'none',
    entry: {
      'large-number': './src/index.js',
    'large-number.min': './src/index.js'
  },
  output: {
      filename: '[name].js',
    library: 'largeNumber',
    libraryTarget: 'umd',
    libraryExport: 'default'
  },
  optimization: {
      minimize: true,
    minimizer: [
        new TerserPlugin({ include: /\.min\.js$/ })
    ]
  }
}

// package.json
{
    "main":"index.js",
  "description": "大整数加法", // 这个描述是发布到npm上的时候的描述
  "script": {
      "prepublish": "webpack" // 发布到npm之前，进行打包
  }
}

// 根目录下的index.js
if(process.env.NODE_ENV === 'production') {
    module.exports = require('./dist/largeNumber.min.js')
} else {
    module.exports = require('./dist/largeNumber.js')
}

• 发布到npm上
  • 先要有一个npm的账号
  • npm publish