webpack—打包组件基础库流程

1. 准备工作，是否有npm账号，如果没有先注册一个；

命令如下：

npm adduser
//依次输入用户名、密码、邮箱；（密码需要复杂一点点10位以上的）
npm whoami
//查看当前用户；

2.webpack除了打包应用，还可以打包js库；

实现一个大整数加法库打包；
1.需要打包压缩版和非压缩版本；
2.支持AMD/CJS/ESM模块引入；
1).ESM
import * as largeNumber from ‘large-number’;
// …
largeNumber.add(‘999’, ‘1’);
2).CJS
const largeNumbers = require(‘large-number’);
largeNumber.add(‘999’, ‘1’);
3).AMD
require([‘large-number’], function (large-number) {
// …
largeNumber.add(‘999’, ‘1’);
})
3.也可直接通过script引入；

3.实战

项目目录如下：

webpack.config.js文件
webpack4.0以上mode:production默认是内置有压缩的，所以配置时先将mode设置为none;

const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  mode: "none",
  entry: {
    "large-number": "./src/index.js",
    "large-number.min": "./index.js",
  },
  output: {
    filename: "[name].js",
    library: "largeNumber", //打包出来库的名字
    libraryTarget: "umd",
    libraryExport: "default",
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        include: /\.min\.js$/,
      }),
    ],
  },
};

根目录index.js

if (process.env.NODE_ENV === "production") {
  module.exports = require("./dist/large-number.min.js");
} else {
  module.exports = require("./dist/large-number.js");
}

src下index.js写需要封装的方法，用export default导出
pacage.json文件添加 “main”: “index.js”,scripts里面添加 “build”: “webpack”,“prepublish”: “webpack”；

最后npm publish发布上去；每次更新前需要改版本号才能发布上去，可以用这个命令对版本进行更新npm version patch；

别的项目引用：
暴露的方法在webpack中的library属性进行配置！！
import largeNumber from “large-number-lr”;
this.res = largeNumber(“999”, “1”);
上传到npm上的库