33_webpack-lib v1.0.0

webpack打包lib包

需求： 实现大型正整数相加，打包出开发环境用的js和生产环境用的.min.js。支持amd/cmj/es6/script标签引用等多种方式。

1. 编写加法代码

export default function add(a, b) {
  let i = a.length - 1;
  let j = b.length - 1;
  let carry = 0;
  let result = "";
  while (i >= 0 || j >= 0) {
    let x = 0;
    let y = 0;
    if (i >= 0) {
      x = a[i] - "0"; // 字符转为数字
      i--;
    }
    if (j >= 0) {
      y = b[j] - "0";
      j--;
    }
    let sum = x + y + carry;

if (sum >= 10) {
  carry = 1;
  sum -= 10;
} else {
  carry = 0;
}
result = sum + result;

} if (carry) { result = carry + result; }

return result; }

### 2. webpack.config.js配置两个entry，打包出`.js`和`.min.js`

const path = require('path') module.exports = { entry: { qingfengmyAdd: "./src/index.js", "qingfengmyAdd.min": "./src/index.js" }, output:{ path: path.resolve(__dirname, 'dist'), filename:'name.js' }, };

### 3. 解决只压缩`.min.js`的代码

mode:none, optimization: { minimize: true, minimizer: new TerserPlugin({ include: /.min.js$/ }) }

安装依赖

yarn add terser-webpack-plugin -D

> terser-webpack-plugin，内容同UglifyjsWebpackPlugin，不过这个支持es6的代码压缩，uglifyjs最新版本也支持es6的压缩
### 4. 设置lib的入口文件:package.json的main 字段为index.js

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

### 5. 将库文件暴露出去

output: { filename: "name.js", library: "qingfengmyAdd", // 全局变量是什么？window.qingfengmyAdd libraryExport: "default", // 默认值 libraryTarget: "umd" // 都支持 }

### 6. 发布到npm上

npm login ... npm publish

### 7. 校验