構(gòu)建過程是復(fù)雜的前端項目必不可少的環(huán)節(jié)；但 業(yè)務(wù)代碼 與 公用代碼（如：封裝的庫、組件、工具等被復(fù)用的代碼）的構(gòu)建需求是不一樣的；我發(fā)現(xiàn)很多 npm 貢獻者都沒意識到這一點，他們用傳統(tǒng)的業(yè)務(wù)項目的 webpack 配置 去打包 公用代碼，雖然能運行，但實際潛藏著許多問題；甚至都不經(jīng)過編譯構(gòu)建，直接發(fā)布單純的源碼到 npm 上；由于本人經(jīng)常封裝一些東西，為了方便構(gòu)建，就使用 webpack 開發(fā)并配置了一套專門用于構(gòu)建公共代碼的配置模板，當需要開發(fā)和構(gòu)建公共代碼時，直接克隆本項目即可；

• 1. 簡介
• 2. 特性
• 3. 使用
• 4. 命令
• 5. 業(yè)務(wù)代碼與公用代碼的構(gòu)建特點
  • 5.1. 業(yè)務(wù)代碼
  • 5.2. 公用代碼
• 6. 構(gòu)建工具的選擇
• 7. 公共代碼構(gòu)建的配置目標
• 8. 組織結(jié)構(gòu)
• 9. project-config.js
• 10. npm包管理配置文件
• 11. Webpack配置文件
• 12. TypeScript配置文件
• 13. 代碼檢查

注意：
為了方便下文描述，我把 業(yè)務(wù)代碼 構(gòu)建出的最終產(chǎn)品稱為 應(yīng)用程序；把 公用代碼 構(gòu)建的出產(chǎn)品稱為 組件；

1. 簡介

library-webpack-template 稱為 庫構(gòu)建模板，又稱 公共代碼構(gòu)建模板 ，是專門用于構(gòu)建 公共代碼（如：封裝的庫、工具等） 的 webpack 配置模板，并對 webpack 配置做了二次封裝，當需要開發(fā)和構(gòu)建公共代碼時，直接克隆本項目，并默認在的 src 目錄下開發(fā)即可；如需定制化配置，只需更改項目根目錄下的 project-config.js 配置文件即可，里面的配置字段 傳明達意、簡單易懂，且有詳細的說明，擯棄了 webpack 配置的魚龍混雜、掩人耳目；

• 主頁(GitHub)：https://github.com/GuoBinyong/-library-webpack-template
• 主頁(碼云)：https://gitee.com/guobinyong/library-webpack-template

如果您在使用的過程中遇到了問題，或者有好的建議和想法，您都可以通過以下方式聯(lián)系我，期待與您的交流：

• 給該倉庫提交 issues
• 給我 Pull requests

2. 特性

• 極易使用，配置極其簡單，配置項傳明達意、簡單易懂；
• 可配置去除 公共代碼 的依賴，默認去除了所有 node_modules 中的依賴；
• 多個構(gòu)建目標可同時構(gòu)建，即：一次構(gòu)建分別生成多個構(gòu)建目標的構(gòu)建包；
• 可快速切換 開發(fā)模式 和 生產(chǎn)模式；
• 自動分離 CSS 和 JavaScript 文件；
• 支持 JavaScript、JSX、TypeScript、TSX、CSS、Sass、Less、Stylus、PostCss等等；
• 支持 ESLint；
• 支持 代碼壓縮；

• 支持 交互式可視化樹形構(gòu)建分析報告，如下圖：

  
  
  交互式可視化樹形構(gòu)建分析報告

3. 使用

從 git倉庫 克隆或者下載本項目到本地，然后默認從 src/index 文件開始寫代碼即可；
通過 項目配置文件 project-config.js 可根據(jù)自己的需求進行定制；

4. 命令

library-webpack-template 項目支持如下構(gòu)建命令：

• npm start : 以開發(fā)模式構(gòu)建項目；
• npm run dev : 以開發(fā)模式構(gòu)建項目；
• npm run build : 以生產(chǎn)模式構(gòu)建項目；

在 project-config.js 配置文件中，如果 沒有配置 bundleAnalyzerReport 選項，則支持運行構(gòu)建命令時 攜帶 --report 選項來開啟 交互式可視化樹形構(gòu)建分析報告，如：npm start --report、npm run dev --report、npm run build --report，當構(gòu)建完成時，會自動打開瀏覽器展示 交互式可視化樹形構(gòu)建分析報告，如下圖：

交互式可視化樹形構(gòu)建分析報告

如果已經(jīng)全局安裝了 webpack 命令，也可以在項目根目錄下執(zhí)行如下命令：

• webpack : 以開發(fā)模式構(gòu)建項目；
• webpack --env.production : 以生產(chǎn)模式構(gòu)建項目；

5. 業(yè)務(wù)代碼與公用代碼的構(gòu)建特點

5.1. 業(yè)務(wù)代碼

• 需要把所有代碼及依賴（包括 公用代碼）都構(gòu)建在一塊，作為一個整體來運行；
  因為：業(yè)務(wù)代碼的最終呈現(xiàn)效果是應(yīng)用程序，應(yīng)用程序是一個完整的代碼邏輯，任何依賴的缺失都會導(dǎo)致應(yīng)用程序崩潰。

• 運行環(huán)境單一；
  業(yè)務(wù)代碼構(gòu)建的應(yīng)用程序要么是運行在瀏覽器的，要么是運行在 node 環(huán)境的；因為業(yè)務(wù)產(chǎn)品是最終供大眾用戶使用的，在開發(fā)業(yè)務(wù)產(chǎn)品（應(yīng)用程序）之初，就已確定了業(yè)務(wù)產(chǎn)品的運行環(huán)境。

• 構(gòu)建目標單一；
  在構(gòu)建業(yè)務(wù)代碼時，往往構(gòu)建目標是明確的，要么是構(gòu)建瀏覽器應(yīng)用，要么是構(gòu)建 note 應(yīng)用，或者其它，總之很少有同時構(gòu)建多個目標的，比如同時構(gòu)建瀏覽器和 note 環(huán)境的應(yīng)用程序。

• 有較強的包體積的限制；
  因為大部分應(yīng)用程序是運行在瀏覽器的，較大的包體積會使應(yīng)用程序加載時間過長，從而影響用戶體驗，所以，一般應(yīng)用程序都要求包的體積盡可能的小；

• 業(yè)務(wù)代碼中通常包含 HTML、CSS、JavaScript 文件；

• CSS 和 JavaScript 文件通常都需要在 HTML 文件中引入；
  瀏覽器端的應(yīng)用程序都是以HTML文件為入口的，通過HTML加載 CSS 和 JavaScript 文件；

5.2. 公用代碼

• 需要去除依賴；
  公共代碼的依賴往往也是其它公共代碼或者業(yè)務(wù)代碼的依賴，當業(yè)務(wù)代碼中引入公共代碼時，極有可能也引入了該公共代碼的依賴，如果公共代碼中不去除其依賴，則會導(dǎo)致業(yè)務(wù)代碼中包含多份公共代碼的依賴，造成代碼冗余，增大業(yè)務(wù)代碼的體積；

• 運行環(huán)境多樣；
  公眾代碼是被應(yīng)用程序引用的，應(yīng)用程序的運行環(huán)境可能是瀏覽器，也可能是 node ，或者其它 ，所以公共代碼的運行環(huán)境是多樣性的；

• 構(gòu)建目標多樣；
  因為公共代碼的運行環(huán)境是多樣的，所以在需要對公共代碼進行構(gòu)建時，往往需要針對每個運行環(huán)境分別進行構(gòu)建；

• 對包體積的沒有特別強列的要求；
  公共代碼最終是要被業(yè)務(wù)代碼引用的，面業(yè)務(wù)代碼構(gòu)建成應(yīng)用程序時通常需要做包體積的壓縮的，所以，對包體積的壓縮通常會在業(yè)務(wù)代碼構(gòu)建成應(yīng)用程序時進行，所以，當公共代碼構(gòu)建成組件時，大多數(shù)情況下也可不做體積壓縮；

• 通常不包含 HTML 文件；

• CSS 和 JavaScript 文件通常分開；
  CSS 和 JavaScript 的組織方式往往是由業(yè)務(wù)代碼組織結(jié)構(gòu)和構(gòu)建方案決定，所以，在公共代碼中，CSS 和 JavaScript 通常是分開的，具體怎么組織，由業(yè)務(wù)代碼決定；

6. 構(gòu)建工具的選擇

前端的構(gòu)建工具有很多，像：Webpack、rollup、Browserify、Parcel、Grunt、Gulp等等；

目前，對于構(gòu)建公共代碼的工具較常用的是 rollup，對于構(gòu)建業(yè)務(wù)代碼，較常用的工具是 Webpack；不過，Webpack 也是可以用于構(gòu)建公共代碼的。

為了統(tǒng)一性，我選擇了用 Webpack 構(gòu)建 公共代碼；所以，就有了本項目————庫構(gòu)建模板，又稱 公共代碼構(gòu)建模板：針對Library的Webapck構(gòu)建配置模板；

7. 公共代碼構(gòu)建的配置目標

公共代碼構(gòu)建的配置目標其就是實現(xiàn)上文所述的公共代碼的構(gòu)建特點，總結(jié)如下：

• 去除依賴
• 一次構(gòu)建可分別生成適用于不同環(huán)境的碼包；
  比如：分別生成用于 node 和 瀏覽器 環(huán)境的包，或者 不同模塊化方案的包，如 AMD、CMD、 CommonJS、UMD等等；
• 能在 開發(fā) 和 生產(chǎn) 兩種模式快速切換；
  開發(fā) 模式下地在需要更多的調(diào)試信息，如 Source Map ；而生產(chǎn)模式下需求盡可能地壓縮包的體積；在開發(fā)調(diào)試的過程中，需要在開發(fā)模式下構(gòu)建包；當開發(fā)完畢，準備發(fā)布時，需要在生產(chǎn)模式下構(gòu)建包；
• 分離 CSS 和 JavaScript 文件；

8. 組織結(jié)構(gòu)

模板項目中默認包含了一些文件和目錄，它們的組織結(jié)構(gòu)和作用如下所示：

library-webpack-template/   # 構(gòu)建前端庫的webpack打包配置模板項目根目錄
   ├── .editorconfig           # 編輯器的通用配置文件
   ├── .eslintignore           # ESLint 的忽略配置文件
   ├── .eslintrc.js            # ESLint 的配置文件
   ├── .gitignore              # git 的忽略配置文件
   ├── .npmignore              # npm 上傳包時的忽略配置文件
   ├── .postcssrc.js           # PostCSS 的配置文件
   ├── tsconfig.json           # 項目的級的 TypeScript 配置文件；同時也是 開發(fā) 和 生產(chǎn) 這兩種模式公共的 TypeScript 配置文件；
   ├── webpack.config.js       # webpack 命令默認的配置文件；這個配置文件存在的目的是為了方便能在項目根目錄下直接使用 `webpack` 命令 進行構(gòu)建；它會根據(jù)執(zhí)行 webpack 命令時是否攜帶含有設(shè)置 production 環(huán)境變量的選項來決定是加載 生產(chǎn)模式 還是 開發(fā)模式 的 構(gòu)建配置；
   ├── package.json            # npm 的包管理配置文件
   ├── project-config.js       # 項目的配置文件；library-webpack-template 提供的 面向使用者的 對 整個項目的配置入口；
   ├── README.md               # 項目的說明文檔
   ├── build/                  # 包含構(gòu)建相關(guān)配置和工具的目錄
   │   ├── tsconfig.dev.js          # 開發(fā)模式特有的 TypeScript 配置文件
   │   ├── tsconfig.prod.js         # 生產(chǎn)模式特有的 TypeScript 配置文件
   │   ├── tools.js                 # 包含與構(gòu)建相關(guān)的工具函數(shù)的 JavaScript 代碼文件
   │   ├── webpack.base.config.js   # 開發(fā) 和 生產(chǎn)兩種模式公共的 webpack 配置文件；
   │   ├── webpack.dev.config.js    # 開發(fā)模式 特有的 webpack 配置文件；
   │   └── webpack.prod.config.js   # 生產(chǎn)模式 特有的 webpack 配置文件；
   ├── src/                    # 默認的包含項目源代碼的目錄
   │   └── index.js                 # 默認的構(gòu)建入口文件；
   ├── dev/                    # 開發(fā)模式下默認的構(gòu)建輸出目錄
   └── dist/                   # 生產(chǎn)模式下默認的構(gòu)建輸出目錄

9. project-config.js

project-config.js 是整個項目的配置文件，是 library-webpack-template 提供的 面向使用者的 對 整個項目的配置入口；相對于 webpack 配置文件，該配置文件具有 傳明達意、簡單易懂 之特點；

該配置文件中的所有配置項都保存在 projectConfig 變量中，可配置的屬性如下：

• entry：webpack 的入口配置 entry； 指示 webpack 應(yīng)該使用哪個模塊，來作為構(gòu)建其內(nèi)部 依賴圖的開始
  • 類型： string | [string] | object { <key>: string | [string] } | (function: () => string | [string] | object { <key>: string | [string] })
  • 詳細信息： https://webpack.docschina.org/configuration/entry-context/#entry
  • 注意： 如果修改了 entry 的值，你可能需要考慮下是否要同步更改下 package.json 中的 module 屬性；

• haveExports : 用于指示庫是否有對外暴露的內(nèi)容，即：是否有導(dǎo)出的項目；
  • 類型： boolean
    • 當值為 true 時，選擇 refName 才會起作用；
    • 當值為 false 時，會忽略 refName 選項；
  • 默認值： true

• refName ：庫的引用名字；與 webpack 的 output.library 選項相同；某些模塊化方案（由 module 選項指定）（比如：var、assign、this、window、self、global 等等）會在引入庫時會在環(huán)境中注入特定名字的環(huán)境變量，以便引入者能夠通過該環(huán)境變量來訪問庫對外暴露的接口，該環(huán)境變量的名字就是由該選項 refName 指定；
  • 類型： string | {root: string, commonjs: string, amd: string} | null | undefined
    • 當值為 undefined | null 時，會使用默認值；
    • 從 webpack 3.1.0 開始；對象類型 {root: string, commonjs: string, amd: string} 的值可用于 項目配置文件 project-config.js 中的 module 選項（即：webpack 中 output.libraryTarget 選項）的值為 'umd' 時；
  • 默認值： getBaseNameOfHumpFormat(package.name)，即：將 package.json 文件中的 name 字段的值去除命名空間后并轉(zhuǎn)成駝峰格式的字符串；getBaseNameOfHumpFormat() 是庫 package-tls 導(dǎo)出的函數(shù)，作用是把包名去除命名空間后 并 從 中劃線 或 下劃線 分隔的方式 轉(zhuǎn)成 駝峰式
  • 詳細信息： https://webpack.docschina.org/configuration/output/#output-library
  • 注意：
    • 只有當選項 haveExports 的值為 haveExports 時，此選項 refName 才會有效；
    • 如果更改了 refName 的值，你可能需要考慮下是否要同步更改下 package.json 中的 name 屬性；

• module ：配置庫的構(gòu)建目標（即：被構(gòu)建（打包）后的包）采用的模塊化方案，也可以理解為：對外暴露 庫 的方式，即：庫將會以哪種方式被使用；與 webpack 的 output.libraryTarget 選項相同；
  • 類型： "var" | "assign" | "this" | "window" | "self" | "global" | "commonjs" | "commonjs2" | "commonjs-module" | "amd" | "amd-require" | "umd" | "umd2" | "jsonp" | "system"
  • 詳細信息： https://webpack.docschina.org/configuration/output/#output-librarytarget

• libraryExport ：庫中被導(dǎo)出的項；與 webpack 的 output.libraryExport 選項相同；
  • 類型： string | string[]
  • 默認值： "default"
  • 備注： 如果設(shè)置成空字符串 "" ，則會導(dǎo)出包含所有導(dǎo)出的對象；
  • 詳細信息： https://webpack.docschina.org/configuration/output/#output-libraryexport

• removeDep ：構(gòu)建庫時，是否要移除庫依賴的模塊；庫依賴的模塊由 dependencies 選項指定；
  • 類型： boolean
    • 當值為 true 時，會移除 dependencies 選項指定的依賴；
    • 當值為 false 時，不會移除任何依賴；
  • 默認值： true

• dependencies ：配置庫的依賴；與 webpack 的 externals 選項相同；
  • 類型： string | object | function | regex | array
  • 默認值： webpackNodeExternals() ； 即排除所有 node_modules 中的模塊； webpackNodeExternals 是 webpack-node-externals 包提供的功能，該包的信息詳見 https://github.com/liady/webpack-node-externals ；
  • 詳細信息： https://webpack.docschina.org/configuration/externals/#externals
  • 注意： 只有 removeDep 選項被設(shè)置為 true 時，該選項 dependencies 才會生效；

• runEnv：指定庫被使用時的運行環(huán)境；與 webpack 的 target 選項相同；因為 服務(wù)器 和 瀏覽器 代碼都可以用 JavaScript 編寫，所以 webpack 提供了多種部署 target(目標)
  • 類型： "web" | "webworker" | "node" | "node-webkit" | "async-node" | "electron-main" | "electron-renderer" | function (compiler)
  • 默認值： "web"
  • 詳細信息： https://webpack.docschina.org/configuration/target/#target

• outputFile ：設(shè)置構(gòu)建后的輸出文件的名字；與 webpack 的 output.filename 相同；此選項決定了每個輸出 bundle 的名稱。這些 bundle 將寫入到 outputDir 選項指定的目錄下
  • 類型： string | function
  • 默認值：
    • 當未顯式指定 module 時，outputFile 的默認值為 <package.json/name>.js；
    • 當顯式指定 module 時，outputFile 的默認值為 <package.json/name>.<project-config.js/module>.js；
    • 注意：
      • 其中 <package.json/name> 的值為 package.json 文件中 name 的值，<project-config.js/module> 為 project-config.js 文件中 module 的值；
      • 你可以在 outputFile 中使用 webpack 提供的模板字符串，如 [name] ；
      • 其中 <package.json/name> 和 <project-config.js/module> 并不是 webpack 給 output.filename 字段提供的有效的模板字符串；
  • 詳細信息： https://webpack.docschina.org/configuration/output/#output-filename

• extensions ：與 webpack 的 resolve.extensions 選項相同，自動解析確定的擴展名，能夠使用戶在引入模塊時不用寫文件的擴展名
  • 類型： string[]
  • 詳細信息： https://webpack.docschina.org/configuration/resolve/#resolve-extensions

• alias：與 webpack 的 resolve.alias 選項相同，創(chuàng)建 import 或 require 的別名，來使模塊引入變得更簡單
  • 類型： object
  • 詳細信息： https://webpack.docschina.org/configuration/resolve/#resolve-alias

• useEslint ：是否使用 Eslint Loader；

  • 類型： boolean
  • 默認值： false
  • 詳細信息： https://github.com/webpack-contrib/eslint-loader

• showEslintErrorsInOverlay ：是否在瀏覽器中顯示 Eslint 的錯誤和警告；

  • 類型： boolean
  • 默認值： false
  • 詳細信息： https://github.com/webpack-contrib/eslint-loader

• htmlTemplate ：html模板文件；html-webpack-plugin
  的 template 選項；

  • 類型： string
  • 詳細信息： https://github.com/ampedandwired/html-webpack-plugin

• htmlOut ：要將 html模板文件 htmlTemplate 寫入的文件。您也可以在此處指定子目錄；該選項會結(jié)合 outputDir 選項 生成 html-webpack-plugin 的 filename 選項 的值；

  • 類型： string
  • 默認值： "index.html"
  • 詳細信息： https://github.com/ampedandwired/html-webpack-plugin

• staticDirectory：靜態(tài)資源的原目錄；該目錄下的內(nèi)容將會被拷貝到構(gòu)建輸出目錄中；

  • 類型： string

• staticOutDirectory：靜態(tài)資源輸出目錄；設(shè)置將靜態(tài)資源從原目錄拷貝到構(gòu)建輸出目錄中時，靜態(tài)資源目錄的名字；

  • 類型： string

• parseNodeModules ：是否要對 node_modules 中的模塊進行編譯；

  • 類型： boolean
  • 默認值： true
  • 說明： 如果設(shè)置為 false，則 node_modules 中的依賴會被直接包含，不會經(jīng)過 webpack 相應(yīng) loader 的處理；

• tsconfig：TypeScript相關(guān)的配置選項對象；可配置 TypeScript 的所有 編譯選項，即：tsconfig.compilerOptions 中的選項；
  • 類型： Object
  • 詳細信息： https://www.tslang.cn/docs/handbook/tsconfig-json.html
  • 除 TypeScript 的所有 編譯選項外，還可配置如下屬性：
    • loader：配置解析 TypeScript 的 loader
      • 類型： "ts-loader" | "babel-loader"
      • 默認值： "ts-loader"
      • 注意： 目前發(fā)現(xiàn)：
        • "ts-loader" 會忽略TypeScript中默認的導(dǎo)出項 export default(TypeScript 3 之后 默認禁用了 export default)，這時配置項 libraryExport: "default" 可能會導(dǎo)致導(dǎo)出的值是 undefined
        • tsconfig 的相關(guān)編譯選項： allowSyntheticDefaultImports：允許從沒有設(shè)置默認導(dǎo)出的模塊中默認導(dǎo)入。這并不影響代碼的輸出，僅為了類型檢查。
        • "babel-loader" 暫未支持生成 聲明文件 .d.ts，并且會忽略 項目中關(guān)于 TypeScript 的自定配置，如：tsconfig.json、tsconfig.dev.js、tsconfig.prod.js 中的配置

• bundleAnalyzerReport ：是否開啟構(gòu)建分析報告；
  • 類型： boolean
  • 默認值： process.env.npm_config_report； 即：根據(jù)執(zhí)行命令時是否帶有 --report 選項來決定是否啟用 構(gòu)建分析報告；

• bundleAnalyzerOptions ：構(gòu)建分析報告的配置選項； webpack-bundle-analyzer 的 webpack 插件選項對象；
  • 類型： Object
  • 默認值： bundleAnalyzerOptions.analyzerPort 的默認值是 "auto"
  • 詳細信息： https://github.com/webpack-contrib/webpack-bundle-analyzer
  • 注意： 如果你配置了多個構(gòu)建目標 multipleTargets ，并且以 server 模式（這是默認的模式）開啟了 構(gòu)建分析報告，則建義采用以下任意一種方案來對 bundleAnalyzerOptions.analyzerPort 進行設(shè)置，這樣可以防止針對每個構(gòu)建目標啟動一個 構(gòu)建分析報告 時，因服務(wù)端口被占用而啟動失敗：
    • 方案1（這是默認的設(shè)置）：將 所有構(gòu)建目標公共的 projectConfig.bundleAnalyzerOptions.analyzerPort 設(shè)置為 auto ；
    • 方案2：分別給每一個 構(gòu)建目標的 bundleAnalyzerOptions.analyzerPort 設(shè)置一個不同的值；

• dev：開發(fā)模式的配置選項對象
  • 類型： Object
  • 可配置的屬性如下：
    • outputDir ：輸出目錄，一個絕對路徑；與 webpack 的 output.path 選項相同；
      • 類型： string
      • 詳細信息： https://webpack.docschina.org/configuration/output/#output-path
      • 注意：
        • 如果你使用的是 ESLint，建議你將該處配置的輸出目錄 增加到 ESLint 的忽略配置文件中一般在項目根目錄下的 .eslintignore 文件中）；
        • 如果你使用的是 TypeScript，建議你將該處配置的輸出目錄 增加到 項目根目錄下的 TypeScript 配置選項（一般在配置文件 tsconfig.json 中）的 排除字段 "exclude" 下，如：

        "exclude":[
          "dist",
          "dev"
        ]
        

    * sourceMap ：source map 的開關(guān)；用于控制是否生成 source map；
        - **類型：** `boolean`
        - **默認值：** `false`
        - **詳細信息：** <https://webpack.docschina.org/configuration/devtool/>

    * devtool ：與 webpack 的 `devtool` 選項相同；用于控制如何生成 source map；
        - **類型：** `string`
        - **默認值：** `false`
        - **詳細信息：** <https://webpack.docschina.org/configuration/devtool/>

    * cssSourceMap ：CSS source map 的開關(guān)；用于控制是否生成 CSS 的 source map；
        - **類型：** `boolean`
        - **默認值：** `false`

• build：生產(chǎn)模式的配置選項對象
  • 類型： Object
  • 可配置的屬性如下：
    • outputDir ：輸出目錄，一個絕對路徑；與 webpack 的 output.path 選項相同；
      • 類型： string
      • 詳細信息： https://webpack.docschina.org/configuration/output/#output-path
      • 注意：
        • 如果你使用的是 ESLint，建議你將該處配置的輸出目錄 增加到 ESLint 的忽略配置文件中一般在項目根目錄下的 .eslintignore 文件中）；
        • 如果你使用的是 TypeScript，建議你將該處配置的輸出目錄 增加到 項目根目錄下的 TypeScript 配置選項（一般在配置文件 tsconfig.json 中）的 排除字段 "exclude" 下，如：

        "exclude":[
          "dist",
          "dev"
        ]
        

    * sourceMap ：source map 的開關(guān)；用于控制是否生成 source map；
        - **類型：** `boolean`
        - **默認值：** `false`
        - **詳細信息：** <https://webpack.docschina.org/configuration/devtool/>

    * devtool ：與 webpack 的 `devtool` 選項相同；用于控制如何生成 source map；
        - **類型：** string
        - **默認值：** `false`
        - **詳細信息：** <https://webpack.docschina.org/configuration/devtool/>

• multipleTargets ：配置多個構(gòu)建目標；當進行構(gòu)建時，會對 multipleTargets 數(shù)組中的每個項目配置分別構(gòu)建并生成對應(yīng)的包；
  • 類型： undefined | null | Array<ProjecConfig | undefined | null>
  • 默認值： undefined
  • 說明：
    • 此選項是可選的，如果沒有配置，或者配置的是一個長度為 0 的空數(shù)組，則會使用 默認的項目配置 projectConfig （默認的項目配置指的是 project-config.js 文件中的 projectConfig 變量保存的配置） ；
    • 如果配置的是一個數(shù)組，數(shù)組中的每個元素都會被當作一個 項目配置 并覆蓋 或 合并 默認的項目配置 projectConfig 中對應(yīng)的具體選項；當進行構(gòu)建時，會對數(shù)組中的每個項目配置分別構(gòu)建并生成對應(yīng)的包；
    • 數(shù)組中的 undefined 和 null 會被當作是 默認的項目配置 projectConfig；
    • 如果配置了多個構(gòu)建目標，則應(yīng)注意多個構(gòu)建目標的輸出因命名、路徑或服務(wù)端口重復(fù)導(dǎo)致導(dǎo)出相互被覆蓋 或者 服務(wù)啟動失敗 的問題；這類問題的解決方案就是：分別為每個構(gòu)建目標設(shè)置相應(yīng)選項設(shè)置一個不同的值；如：
      • 分別為每個構(gòu)建目標的 outputFile 設(shè)置一個不同的值，如 {runEnv: "node", outputFile: '[name].node.js' } ，這樣可以防止多個構(gòu)建目標的構(gòu)建包相互覆蓋 ；outputFile 的默認值已包含了配置變量 module，所以，如果分別為每個構(gòu)建目標的 module 選項顯式地指定了不同的值，則也不會出現(xiàn)構(gòu)建輸出文件相互覆蓋的問題；
      • 如果以 server 模式（這是默認的模式）開啟了 構(gòu)建分析報告，則應(yīng)該采用以下任意一種方案來對 bundleAnalyzerOptions.analyzerPort 進行設(shè)置：
        • 方案1（這是默認的設(shè)置）：將 所有構(gòu)建目標公共的 projectConfig.bundleAnalyzerOptions.analyzerPort 設(shè)置為 auto ；
        • 方案2：分別給每一個 構(gòu)建目標的 bundleAnalyzerOptions.analyzerPort 設(shè)置一個不同的值；

• overrideKeys ：指定 在將 多構(gòu)建目標 multipleTargets 中的選項 與 默認的項目配置 projectConfig 進行合并時 采用覆蓋方式進行合并的 key；
  • 類型： Array<string> | undefined | null
  • 默認值： undefined
  • 說明：
    • 此選項只用于 多構(gòu)建目標 multipleTargets 與 默認的項目配置 projectConfig 的合并；
    • 些選擇只能配置在 projectConfig 的頂層（即：projectConfig.overrideKeys），多構(gòu)建目標 multipleTargets 中的 overrideKeys 選項會被忽略；

10. npm包管理配置文件

library-webpack-template 中與 npm 包管理相關(guān)的配置文件有 2 個：

• .npmignore : npm 上傳包時的忽略配置文件；默認忽略了 與構(gòu)建配置文件的所有文件和目錄，如：build/ 等等；也忽略了開發(fā)環(huán)境默認的輸出目錄 dev/，還有編輯器相關(guān)的文件和目錄，如：.idea、.vscode；
• package.json : npm 的包管理配置文件；同時也是 通過 npm 上傳、發(fā)布 包 的 配置模板文件；

注意： package.json 文件中的如下字段：

• module : 該字段是用來指定以標準模塊暴露的出口文件；
• types | typings ： 該字段是用來指定庫的類型聲明文件；如果庫沒有類型聲明文件，則去除該字段；
• "sideEffects" : boolean | Array<string> ，可以為布爾，表示整個包是否有副作用；也可以是一些有副作用文件的的路徑字符串，路徑支持 相對路徑、絕對路徑和 glob 模式； 副作用標記；表明項目中的哪些文件不是 純的 ES2015 模塊，由此不能安全地刪除文件中未使用的部分，"side effect(副作用)" 的定義是，在導(dǎo)入時會執(zhí)行特殊行為的代碼，而不是僅僅暴露一個 export 或多個 export。舉例說明，例如 polyfill，它影響全局作用域，并且通常不提供 export；詳細內(nèi)容請見 https://webpack.docschina.org/guides/tree-shaking/#將文件標記為-side-effect-free-無副作用-

關(guān)于package.json文件的詳細配置信息請參考https://docs.npmjs.com/files/package.json

11. Webpack配置文件

library-webpack-template 中包含了4個 webpack 配置文件：

• build/webpack.base.config.js : 這個文件包含提 開發(fā) 和 生產(chǎn)這兩個模式 公共的 webpack 配置；
• build/webpack.dev.config.js : 這個文件僅包含提 開發(fā)模式 特有的 webpack 配置；
• build/webpack.prod.config.js : 這個文件僅包含提 生產(chǎn)模式 特有的 webpack 配置；
• webpack.config.js : 這個配置文件存在的目的是為了方便能在項目根目錄下直接使用 webpack 命令 進行構(gòu)建；它會根據(jù)執(zhí)行 webpack 命令時是否攜帶含有設(shè)置 production 環(huán)境變量的選項來決定是加載 生產(chǎn)模式 還是 開發(fā)模式 的 構(gòu)建配置；

所以，項目真正的 webpack 構(gòu)建配置是放在 build/ 目錄下的 3個 webpack 配置文件中的：build/webpack.base.config.js、build/webpack.dev.config.js、build/webpack.prod.config.js ；

關(guān)于 webpack 的詳細配置信息請參考https://webpack.docschina.org/configuration/

12. TypeScript配置文件

library-webpack-template 中包含了3個 TypeScript 配置文件：

• tsconfig.json : 這個文件是項目的級的 TypeScript 配置文件；同時也是 開發(fā) 和 生產(chǎn) 這兩種模式公共的 TypeScript 配置文件； 并且 該文件的存在，也是為了方便能在項目根目錄下直接使用 TypeScript 的編譯命令 tsc；
• build/tsconfig.dev.js : 這個文件僅包含提 開發(fā)模式 特有的 TypeScript 配置；并且會覆蓋 公共配置 tsconfig.json 中相應(yīng)的具體選項；
• build/tsconfig.prod.js : 這個文件僅包含提 生產(chǎn)模式 特有的 TypeScript 配置；并且會覆蓋 公共配置 tsconfig.json 中相應(yīng)的具體選項；

其中 build/ 目錄下的 tsconfig 配置文件是供 ts-loader 使用的，并且只會用到 tsconfig 中的編譯選項 compilerOptions，其它選項會被忽略；

關(guān)于 tsconfig 的詳細配置信息請參考 https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

13. 代碼檢查

本配置模版默認使用 ESLint 作為 JavaScript 和 TypeScript 的代碼檢查工具；至于為什么 TypeScript 不用 TSLint 作為代碼檢查工具的原因請參看 https://github.com/typescript-eslint/typescript-eslint；

ESLint 相關(guān)的配置文件如下：

• .eslintrc.js : ESLint 的配置文件，可配置 解析器、解析選項、規(guī)則 等等；默認是 TypeScript 代碼檢查配置；
• .eslintignore : ESLint 的忽略文件的配置文件；

關(guān)于 ESLint 的詳細配置信息請參考 http://eslint.cn/docs/user-guide/configuring

有您的支持，我會在開源的道路上，越走越遠 贊賞碼