本文將會介紹如何將自己寫的組件庫打包成第三方庫，發佈到 npm 上，同時支持在原生 js / React/ Vue 下使用。Webpack4 的升級指南可以參考下 Webpack4.0 升級配置，本文不做贅述。
使用 Webpack4.0 打包
// src/index.js
exports default function Tree() {
console.log('Hello Tree')
}
假設我們有上面的 index.js 文件，我們想要把打它打包成一個 tree.js 和一個 tree.min.js 包，並且我希望我既可以通過 <script src="../dist/tree.js"></script> 直接 new Tree() ，又可以通過 import Tree from 'tree' 或 let Tree = require('tree') 引入，怎麼做呢？這就要使用 Webpack 來處理了。
Webpack 不僅可以打包 React / Vue 相關的項目工程，也可以單獨打包 js 組件。先來看下入口與出口的配置：
module.exports = {
//...
mode: "none",
entry: {
tree: "./src/index.js",
"tree.min": "./src/index.js"
},
output: {
filename: "[name].js",
libraryExport: "default",
library: "Tree",
libraryTarget: "umd"
}
//...
};
mode
Webpack4.0 會在默認情況下開啓 mode=production，這會無差別的壓縮我們的 tree.js 和 tree.min.js，這不是我們想要的，禁用它。
entry
entry 裏面我們配置兩個入口 tree、"tree.min"，讓 webpack 可以打包出兩個文件，我們可以針對兩個入口做不同的處理。
output
output 的 filename 表示打包出來文件名叫什麼。libraryExport=default 表示打包出來的組件直接對外暴露 default 屬性，否則我們調用的時候需要 new Tree.default()，這不是我們希望的調用方式。library=Tree 表示對外暴露的組件叫什麼，如果這個地方修改成了 library=Bar，那我們調用的時候就是 new Bar()。libraryTarget=umd 表示採用 UMD (Universal Module Definition) 的方式打包 js，同時支持在 CommonJS、AMD 和全局變量使用。
optimization
怎麼對 tree.min.js 壓縮，但不對 tree.js 壓縮呢？請看下面的配置部分：
// ...
optimization: {
minimize: true,
minimizer: [
new UglifyJSPlugin({
include: /\.min\.js$/,
}),
],
},
// ...
通過 include 設置只壓縮 min.js 結尾的文件，是不是很簡單。這樣我們就得到了 dist/tree.min.js、dist/tree.js 兩個文件。下面我們開始發佈代碼到 npm。
發佈組件庫到 npm 上
發佈之前
發佈之前，還有件事需要做，在項目根目錄新建 index.js，添加內容
if (process.env.NODE_ENV === "production") {
module.exports = require("./dist/tree.min.js");
} else {
module.exports = require("./dist/tree.js");
}
修改 package.json 的 main 爲 index.js，指定我們通過 import / require 的時候入口文件位置。
註冊 npm
想要發佈代碼到 npm 上，需要先註冊一個賬號，你可以直接打開官網註冊，這裏我們選擇更 cooooool 的方式註冊。
npm adduser
依次輸入 Username、Password、Email 完成註冊。
登錄 npm
註冊好賬號之後需要在 Terminal 上登錄 npm，在 Terminal 中直接註冊的同學就不需用登錄了。
npm login
輸入 Username、Password、Email 完成登錄。
發佈到 npm
npm publish
發佈的包名就是你的 package.json 的 name 和 version。有衝突的話需要換一個哦。
參考：https://download.csdn.net/download/weixin_38631042/14919499?spm=1001.2101.3001.5697