如何使用webpack打包一個庫library

平常咱們開發了一個庫以後，如何打包以後提供給別人使用呢？若是你不清楚，就繼續看吧！！！

初始化庫

mkdir library
cd library
npm init -y
複製代碼

通過以上步驟後會生成一個library文件夾，裏面包含一個package.json文件。而後簡單修改成以下所示：

{
  "name": "library",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/library.js",
  "scripts": {
    "build": "webpack"
  },
  "keywords": [],
  "author": "rocky",
  "license": "MIT"
}
複製代碼

簡單建立幾個文件

在根目錄下新建src文件夾，新建一個math.js和string.js。相關文件內容以下：

// math.js
export function add(a,b){
    return a+b;
}

export function minus(a,b){
    return a-b;
}

export function multiply(a,b){
    return a*b;
}

export function division(a,b){
    return a/b;
}
複製代碼

// string.js
export function join(a,b){
    return a+" "+b;
}
複製代碼

繼續新建一個index.js

import * as math from "./math";
import * as string from "./string";

export default {math,string}
複製代碼

簡單安裝webpack依賴

npm install webpack webpack-cli --save
複製代碼

安裝的同時，能夠建立webpack配置文件webpack.config.js，以下配置：

const path = require("path");

module.exports={
    mode:"production",
    entry:"./src/index.js",
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"library.js",
        library:"library",// 在全局變量中增長一個library變量
        libraryTarget:"umd"
    }
}
複製代碼

安裝成功後，執行打包命令

npm run build
複製代碼

以後會在根目錄下生成一個dist文件夾，裏面包含一個library.js。

如何使用呢？

若是別人要使用這個打包後的library.js的話，可能會有以下幾種方式：

// es6方式
import library from "library"

// commonjs方式
const library=require("library")

// AMD方式
require(["library"],function(){})

// script標籤引入
<script src="library.js"></script>
複製代碼

在dist文件夾裏建立一個index.html，用script引入以前打包生成的library.js。瀏覽器打開index.html,在控制檯中輸入library,會獲得以下所示的結果：

一個簡單的庫便打包生成了。 註解：webpack中libraryTarget配置項能夠設爲umd,表示採用umd規範，若是設置爲this,表示在this下掛載了一個library變量。更多用法可參考 webpack官網。

引入別的庫用法

假設須要引入lodash.安裝lodash

npm install lodash --save
複製代碼

修改以前建立的string.js

import _ from "lodash";

export function join(a,b){
    // return a+" "+b;
    return _.join([a,b]," ");
}
複製代碼

運行打包命令，發現打包出來的庫體積變大了，由於咱們引入了lodash,致使包變大。怎麼辦呢？修改webpack配置文件。 增長一個externals配置項：

const path =require("path");

module.exports={
    mode:"production",
    entry:"./src/index.js",
    externals:["lodash"],// 配置不打包文件
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"library.js",
        library:"library",
        libraryTarget:"umd"
    }
}
複製代碼

以後打包就會發現庫的體積又變小了。

以上就是一個簡單打包庫的過程，打包完成後，就可使用npm相關命令將庫發佈到npm倉庫，發佈成功後，就可讓別的小夥伴使用了。固然在實際狀況中，打包一個庫的話，須要作的還有不少，好比tree-shaking,優化方面的東西，我也正在逐漸學習中！

參考資料

• webpack output libraryTarget
• webpack external