如何用webpack打包umd模块并测试打包结果

对于 JavaScript 的模块而言, webpack 可以用来build 基于浏览器或服务端的包.

下面让我们学习如何使用webpack生成UMD.

首先需要全局安装webpack

npm install -g webpack

让我们先来创建一个用来返回两数之和的加法模块.

// add.js
module.exports = function add(a, b) {
  return a + b;
};

接下来,我们来建立webpack配置

// webpack.config.js
module.exports = {
  entry: './add.js',
  output: {
    filename: './dist/add.js',
    // export to AMD, CommonJS, or window
    libraryTarget: 'umd',
    // the name exported to window
    library: 'add'
  }
};

接下来使用webpack来build你的模块.

$ webpack
Hash: 87657f97293582af3ac3
Version: webpack 4.29.3
Time: 435ms
Built at: 02/22/2019 9:01:57 AM
   Asset      Size  Chunks             Chunk Names
./add.js  1.17 KiB       0  [emitted]  main
Entrypoint main = ./add.js
[0] ./add.js 83 bytes {0} [built

现在你可以来使用CommonJS