webpack 创建个人的第三方依赖library

webpack 创建个人的第三方依赖 library

---

导读

除了打包应用程序代码，webpack 还可以用于打包 JavaScript library,所以我们可以使用webpack很方便的打包我们的library项目
项目地址：https://github.com/RiversCoder/webpack-test

项目目录

  |- webpack.config.js
  |- package.json
  |- /node_modules
    |- … 
  |- /src
    |- index.js
    |- test.js

编辑index.js如下

实现时间格式化，以及随机字符串格式化的

import moment from 'moment';

// 时间格式化
export function formatTime(format){
  return moment(format)
}

// 随机字符串
export function randomString(len) {
　　len = len || 32;
　　var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
　　var maxPos = $chars.length;
　　var pwd = '';
　　for (i = 0; i < len; i++) {
　　　　pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
　　}
　　return pwd;
}

编辑webpack.config.js如下

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'tool-format.js'
  }
};

尝试webpack打包编译，如下：

D:\me\npm\test\webpack-test\examples\case01_create_library>npx webpack
Hash: cfbdf2a67dbb5b12d27f
Version: webpack 4.34.0
Time: 1300ms
Built at: 2019-06-27 12:02:54 PM
         Asset     Size  Chunks             Chunk Names
tool-format.js  233 KiB       0  [emitted]  main
Entrypoint main = tool-format.js
[128] ./src/index.js 449 bytes {0} [built]
[129] (webpack)/buildin/module.js 497 bytes {0} [built]
[130] ./node_modules/[email protected]@moment/locale sync ^\.\/.*$ 3 KiB {0} [optional] [built]
    + 128 hidden modules

在这里我我们可以观察得到，编译出来的tool-format.js文件大小为233KB，过于太大，所以我们需要外部化我们的依赖包moment

修改webpack.config.js配置如下

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'tool-format.js'
  },
  externals: {
     moment: {
       commonjs: 'moment',
       commonjs2: 'moment',
       amd: 'moment',
       root: 'moment'
     }
   }
};

再次打包打印如下

D:\me\npm\test\webpack-test\examples\case01_create_library>npx webpack
Hash: f841a905ae2ec1909b3e
Version: webpack 4.34.0
Time: 921ms
Built at: 2019-06-27 1:33:24 PM
         Asset      Size  Chunks             Chunk Names
tool-format.js  1.25 KiB       0  [emitted]  main
Entrypoint main = tool-format.js
[0] external {"commonjs":"moment","commonjs2":"moment","amd":"moment","root":"moment"} 42 bytes {0} [built]
[1] ./src/index.js 449 bytes {0} [built]

现在这次打包的大小，已经有1.25KB了

暴露我们自定义的 library

修改webpack.config.js如下展示：

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'tool-format.js',
    library: 'toolFormat',
    libraryTarget: 'umd'
  },
  externals: {
     moment: {
       commonjs: 'moment',
       commonjs2: 'moment',
       amd: 'moment',
       root: 'moment'
     }
   }
};

再次打包编译如下：

D:\me\npm\test\webpack-test\examples\case01_create_library>npx webpack
Hash: d867325bd7fc46b67a68
Version: webpack 4.34.0
Time: 938ms
Built at: 2019-06-27 3:50:06 PM
         Asset      Size  Chunks             Chunk Names
tool-format.js  1.52 KiB       0  [emitted]  main
Entrypoint main = tool-format.js
[0] external {"commonjs":"moment","commonjs2":"moment","amd":"moment","root":"moment"} 42 bytes {0} [built]
[1] ./src/index.js 449 bytes {0} [built]