webpack中library和libraryTarget使用场景

作者:高姗日期:2017-01-17 14:03:04 点击:3570

 接下来我们来说说library和libraryTarget的使用场景。

有些时候我们想要开发一个库,如lodash、underscore这些,这些库既可以用commonjs和amd的方式使用,也可以通过script标签的方式引入使用,目前很多库都是支持这几种使用方式的。

这时候我们就可以使用library和libraryTarget了,我们只需要用用es6的方式写代码,如何编译成umd就交给webpack了。

使用这个tools的例子

  window.Tools = {
    add: function(num1, num2) {
      return num1 + num2
    }
  }

改为es6的写法

  exports default {
    add: function(num1, num2) {
      return num1 + num2
    }
  }

接下来配置webpack

  module.exports = {
    entry: { myTools: "./src/tools.js" },
    output: {
      path: path.resolve(__dirname, "build"),
      filename: '[name].js',
      chunkFilename: "[name].min.js",
      libraryTarget: "umd",
      library: "tools"
    }
  }

library指定的就是你使用require时的模块名,这里便是require(“tools”)

通过配置不同的libraryTarget会生成不同umd的代码,例如可以只是commonjs标准的,也可以是指amd标准的,也可以只是通过script标签引入的。

开发测试之后,便可以发布到npm给别人使用了。

上一篇: webpack中的externals的使用

下一篇: 微信小程序基础教程(目录结构与配置)