webpack打包npm包

本文时通过实现一个大整数相加npm包的例子来讲解webpack如何打包npm包的。

该例子的要求：

• 有两个版本，一个是非压缩版（large-number.js），用于测试环境，一个是压缩版（large-number.min.js），用于生产环境。

• 支持AMD、CJS、ES Module模式，支持script标签引入。

一、AMD、CJS、ES Module

• AMD：

  require('large-number', function(large-number){....})

• CJS

  const largeNUmber = require('large-number')

• ES Module

  import largeNumber from 'large-number'

二、大整数相加代码

function add(a, b) {  let i = a.length - 1;  let j = b.length - 1;  let carry = 0;  let ret = "";  while (i >= 0 || j >= 0) {    let x = 0;    let y = 0;    let sum;    if (i >= 0) {      x = a[i] - "0";      i--;    }    if (j >= 0) {      y = b[j] - "0";      j--;    }    sum = x + y + carry;    if (sum >= 10) {      carry = 1;      sum -= 10;    } else {      carry = 0;    }    ret = sum + ret;  }  if (carry) {    ret = ret + carry;  }  console.log(ret);}add("409", "10");

三、webpack配置

功能已经实现了吗，那么现在我们来实现一个打包，我们的目的是生成两个文件，一个js文件，一个min.js文件。

webpack配置：

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",    libraryExport: "default",    libraryTarget: "umd",  },  optimization: {    minimize: true,    minimizer: [new TerserPlugin({ test: /\.min.js$/ })],  },};

这里entry指定入口文件，output指定出口文件，library指定暴漏出来的变量名，libraryExport指定暴漏出来的为函数的default，不然在使用的时候要使用largeNumber.default，libraryTarget指定可以使用AMD、CJS、ESModule。

mode为none，同时optimization中使用TerserPlugin对min文件进行压缩。

我们也可以这样定义output的library：

    library: {      name: "largeNumber",      type: "umd",      export: "default",    },

这是建议使用的，因为第一种方法可能会在未来被弃用。

package.json中的main属性为index.js，是指定该npm包的入口为src的同级index.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");}

指定如果是生产环境，则使用压缩版本，开发环境使用非压缩版本。