>[success] # 打包一個組件庫 ~~~ 1.在項目開發的一定階段的時候，我們會構建屬于自己公司內部的一些工具庫，我們可以使用webpack 來進行構建 ~~~ >[info] ## 如何構建 ~~~ 1.在構建時候我們需要考慮點如下： 1.1.需要打包壓縮版和?壓縮版本 1.2.?持 AMD/CJS/ESM 模塊引? 2.了解打包一些屬性 output: { path: path.resolve(__dirname, 'dist'), filename: 'number-word.js', //打包之后生成的文件名，可以隨意寫。 library: 'numberWord', // 指定類庫名,主要用于直接引用的方式(比如使用script 標簽) libraryExport: "default", // 對外暴露default屬性，就可以直接調用default里的屬性 globalObject: 'this', // 定義全局變量,兼容node和瀏覽器運行，避免出現"window is not defined"的情況 libraryTarget: 'umd' // 定義打包方式Universal Module Definition,同時支持在CommonJS、AMD和全局變量使用 }, ~~~ [output-librarytarget更多的打包暴露方式](https://www.webpackjs.com/configuration/output/#output-librarytarget) >[danger] ##### 嘗試構建 ~~~ 1.構架步驟前期準備還是一樣的安裝webpack -- 'npm i webpack webpack-cli -D' 2.決定文件壓縮 -- 'npm i webpack webpack-cli -D' 3.對文件目錄做一下說明，首先src下的index.js 就是我們寫基本庫，打包時候的入口 文件，根目錄的index.js 是packjson里面'main'字段文件位置 4.要記住用戶使用的是我們打包在dist 里面的文件內容 ~~~ [packjson 中main字段說明](https://blog.csdn.net/u014291497/article/details/78014446)  * webpack.config.js 配置 ~~~ const TerserPlugin = require('terser-webpack-plugin') module.exports = { mode:'none', // 為了控制那些入口文件是真正需要壓縮的，這樣設置none就可以純自己配置 entry: { 'test-lib': './src/index.js', 'test-lib.min': './src/index.js', }, output: { filename: '[name].js', library: 'testLib', libraryTarget: 'umd', libraryExport: 'default' }, optimization: { minimize: true, minimizer: [ new TerserPlugin({ include: /\.min\.js$/, }), ], } } ~~~ * 根目錄的index.js 配置 ~~~ 1.在不同環境下 使用的是壓縮包還是非壓縮包 ~~~ ~~~ if (process.env.NODE_ENV === "production") { module.exports = require("./dist/large-number.min.js"); } else { module.exports = require("./dist/large-number.js"); } ~~~