33_webpack-lib 中文文档教程

Question

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. 校验