# max-lib

**Repository Path**: max-lu/max-lib

## Basic Information

- **Project Name**: max-lib
- **Description**: webpack5 打包公共库
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-19
- **Last Updated**: 2023-01-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: webpack5, 公共库

## README

# webpack 5 打包公共库

+ 为了方便查看，mode设置成“development”

+ 主要是配置output

```js
output: {
	path: "",
    filename: "",
    library: "maxLibrary",
    libraryTarget: "var"
}
```

+ libraryTarget配置

```
"var": 在打包后的文件中可以看到 var maxLibrary；所有的方法都被赋值在这个变量上面
"window"：看到window.maxLibrary = __webpack_exports__;
"umd": 提供更多的选择（常用）。缺点：体积会大一点
```

+ 希望输出两份bundle，有一个是压缩的（如react就是如此）

```js
{
  entry: {
    "sum-number": "./src/index.js",
    "sum-number.min": "./src/index.js",
  },
  mode: "development",
  output: {
    path: resolve(__dirname, "umd"),
    filename: "[name].js",
    // 指定公共库的名称
    library: "maxLibrary",
    // 公共库代码的打包规范
    // 可选：var assign this window global umd(最多使用) amd commonjs(cjs) 
    libraryTarget: "umd",
  }
}
```

上面是可以输入两个bundle，bundle.min并没有压缩。借助一个库

```shell
npm i terser-webpack-plugin -D
```

```js
const TerserWebpackPlugin = require("terser-webpack-plugin"); 
{
  entry: {
    "sum-number": "./src/index.js",
    "sum-number.min": "./src/index.js",
  },
  mode: "none", // 注意这里
  output: {
    path: resolve(__dirname, "umd"),
    filename: "[name].js",
    library: "maxLibrary",
    libraryTarget: "umd",
  },
  // ---------------- 从这里开始 ----------------
  optimization: { // 用来做优化的key
    minimize: true, // 是否开启压缩
    minimizer: [
      new TerserWebpackPlugin({
        test: /\.min\.js$/,
      }),
    ],
  }
}
```

```shell
npm run dev
```

成功以后创建入口文件index.js

```js
// 根据用户环境导出相应的模块代码
if (process.env.NODE_ENV == "production") {
  module.exports = require("./umd/sum-number.js");
} else {
  module.exports = require("./umd/sum-number.min.js");
}
```

如上，就可以发布包了

```
1.确定源：切换到npm源https://registry.npmjs.org/(可以利用nrm)（可以通过npm config list查看）
2.登录：npm login。输入账号密码
3.发布：npm publish(发布的名称，是package.json文件里面的name)
4.在npm网站里找到我们发布的包
```