library-webpack-template：構(gòu)建庫library的webpack配置模板，專門用于打包庫library、發(fā)布npm包

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

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

1. 簡介

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

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

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

2. 特性

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

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


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

3. 使用

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

4. 命令

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

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

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

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

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

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

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

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

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

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

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

  • 有較強(qiáng)的包體積的限制；
    因?yàn)榇蟛糠謶?yīng)用程序是運(yùn)行在瀏覽器的，較大的包體積會(huì)使應(yīng)用程序加載時(shí)間過長，從而影響用戶體驗(yàn)，所以，一般應(yīng)用程序都要求包的體積盡可能的小；

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

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

5.2. 公用代碼

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

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

  • 構(gòu)建目標(biāo)多樣；
    因?yàn)楣泊a的運(yùn)行環(huán)境是多樣的，所以在需要對(duì)公共代碼進(jìn)行構(gòu)建時(shí)，往往需要針對(duì)每個(gè)運(yùn)行環(huán)境分別進(jìn)行構(gòu)建；

  • 對(duì)包體積的沒有特別強(qiáng)列的要求；
    公共代碼最終是要被業(yè)務(wù)代碼引用的，面業(yè)務(wù)代碼構(gòu)建成應(yīng)用程序時(shí)通常需要做包體積的壓縮的，所以，對(duì)包體積的壓縮通常會(huì)在業(yè)務(wù)代碼構(gòu)建成應(yīng)用程序時(shí)進(jìn)行，所以，當(dāng)公共代碼構(gòu)建成組件時(shí)，大多數(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等等；

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

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

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

公共代碼構(gòu)建的配置目標(biāo)其就是實(shí)現(xiàn)上文所述的公共代碼的構(gòu)建特點(diǎn)，總結(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)建包；當(dāng)開發(fā)完畢，準(zhǔn)備發(fā)布時(shí)，需要在生產(chǎn)模式下構(gòu)建包；
  • 分離 CSS 和 JavaScript 文件；

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

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

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

9. project-config.js

project-config.js 是整個(gè)項(xiàng)目的配置文件，是 library-webpack-template 提供的 面向使用者的 對(duì) 整個(gè)項(xiàng)目的配置入口；相對(duì)于 webpack 配置文件，該配置文件具有 傳明達(dá)意、簡單易懂 之特點(diǎn)；

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

  • entry：webpack 的入口配置 entry； 指示 webpack 應(yīng)該使用哪個(gè)模塊，來作為構(gòu)建其內(nèi)部 依賴圖的開始
    • 類型： string | [string] | object { <key>: string | [string] } | (function: () => string | [string] | object { <key>: string | [string] })
    • 詳細(xì)信息： https://webpack.docschina.org/configuration/entry-context/#entry
    • 注意： 如果修改了 entry 的值，你可能需要考慮下是否要同步更改下 package.json 中的 module 屬性；
  • haveExports : 用于指示庫是否有對(duì)外暴露的內(nèi)容，即：是否有導(dǎo)出的項(xiàng)目；
    • 類型： boolean
      • 當(dāng)值為 true 時(shí)，選擇 refName 才會(huì)起作用；
      • 當(dāng)值為 false 時(shí)，會(huì)忽略 refName 選項(xiàng)；
    • 默認(rèn)值： true
  • refName ：庫的引用名字；與 webpack 的 output.library 選項(xiàng)相同；某些模塊化方案（由 module 選項(xiàng)指定）（比如：var、assign、this、window、self、global 等等）會(huì)在引入庫時(shí)會(huì)在環(huán)境中注入特定名字的環(huán)境變量，以便引入者能夠通過該環(huán)境變量來訪問庫對(duì)外暴露的接口，該環(huán)境變量的名字就是由該選項(xiàng) refName 指定；
    • 類型： string | {root: string, commonjs: string, amd: string} | null | undefined
      • 當(dāng)值為 undefined | null 時(shí)，會(huì)使用默認(rèn)值；
      • 從 webpack 3.1.0 開始；對(duì)象類型 {root: string, commonjs: string, amd: string} 的值可用于 項(xiàng)目配置文件 project-config.js 中的 module 選項(xiàng)（即：webpack 中 output.libraryTarget 選項(xiàng)）的值為 'umd' 時(shí)；
    • 默認(rèn)值： getBaseNameOfHumpFormat(package.name)，即：將 package.json 文件中的 name 字段的值去除命名空間后并轉(zhuǎn)成駝峰格式的字符串；getBaseNameOfHumpFormat() 是庫 package-tls 導(dǎo)出的函數(shù)，作用是把包名去除命名空間后 并 從 中劃線 或 下劃線 分隔的方式 轉(zhuǎn)成 駝峰式
    • 詳細(xì)信息： https://webpack.docschina.org/configuration/output/#output-library
    • 注意：
      • 只有當(dāng)選項(xiàng) haveExports 的值為 haveExports 時(shí)，此選項(xiàng) refName 才會(huì)有效；
      • 如果更改了 refName 的值，你可能需要考慮下是否要同步更改下 package.json 中的 name 屬性；
  • module ：配置庫的構(gòu)建目標(biāo)（即：被構(gòu)建（打包）后的包）采用的模塊化方案，也可以理解為：對(duì)外暴露 庫 的方式，即：庫將會(huì)以哪種方式被使用；與 webpack 的 output.libraryTarget 選項(xiàng)相同；
  • libraryExport ：庫中被導(dǎo)出的項(xiàng)；與 webpack 的 output.libraryExport 選項(xiàng)相同；
  • removeDep ：構(gòu)建庫時(shí)，是否要移除庫依賴的模塊；庫依賴的模塊由 dependencies 選項(xiàng)指定；
    • 類型： boolean
      • 當(dāng)值為 true 時(shí)，會(huì)移除 dependencies 選項(xiàng)指定的依賴；
      • 當(dāng)值為 false 時(shí)，不會(huì)移除任何依賴；
    • 默認(rèn)值： true
  • dependencies ：配置庫的依賴；與 webpack 的 externals 選項(xiàng)相同；
  • runEnv：指定庫被使用時(shí)的運(yùn)行環(huán)境；與 webpack 的 target 選項(xiàng)相同；因?yàn)?服務(wù)器 和 瀏覽器 代碼都可以用 JavaScript 編寫，所以 webpack 提供了多種部署 target(目標(biāo))
  • outputFile ：設(shè)置構(gòu)建后的輸出文件的名字；與 webpack 的 output.filename 相同；此選項(xiàng)決定了每個(gè)輸出 bundle 的名稱。這些 bundle 將寫入到 outputDir 選項(xiàng)指定的目錄下
    • 類型： string | function
    • 默認(rèn)值：
      • 當(dāng)未顯式指定 module 時(shí)，outputFile 的默認(rèn)值為 <package.json/name>.js；
      • 當(dāng)顯式指定 module 時(shí)，outputFile 的默認(rèn)值為 <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 字段提供的有效的模板字符串；
    • 詳細(xì)信息： https://webpack.docschina.org/configuration/output/#output-filename

  • htmlTemplate ：html模板文件；html-webpack-plugin
    的 template 選項(xiàng)；

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

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

    • 類型： string

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

    • 類型： string

  • parseNodeModules ：是否要對(duì) node_modules 中的模塊進(jìn)行編譯；

    • 類型： boolean
    • 默認(rèn)值： true
    • 說明： 如果設(shè)置為 false，則 node_modules 中的依賴會(huì)被直接包含，不會(huì)經(jīng)過 webpack 相應(yīng) loader 的處理；
  • tsconfig：TypeScript相關(guān)的配置選項(xiàng)對(duì)象；可配置 TypeScript 的所有 編譯選項(xiàng)，即：tsconfig.compilerOptions 中的選項(xiàng)；
    • 類型： Object
    • 詳細(xì)信息： https://www.tslang.cn/docs/handbook/tsconfig-json.html
    • 除 TypeScript 的所有 編譯選項(xiàng)外，還可配置如下屬性：
      • loader：配置解析 TypeScript 的 loader
        • 類型： "ts-loader" | "babel-loader"
        • 默認(rèn)值： "ts-loader"
        • 注意： 目前發(fā)現(xiàn)：
          • "ts-loader" 會(huì)忽略TypeScript中默認(rèn)的導(dǎo)出項(xiàng) export default(TypeScript 3 之后 默認(rèn)禁用了 export default)，這時(shí)配置項(xiàng) libraryExport: "default" 可能會(huì)導(dǎo)致導(dǎo)出的值是 undefined
          • tsconfig 的相關(guān)編譯選項(xiàng)： allowSyntheticDefaultImports：允許從沒有設(shè)置默認(rèn)導(dǎo)出的模塊中默認(rèn)導(dǎo)入。這并不影響代碼的輸出，僅為了類型檢查。
          • "babel-loader" 暫未支持生成 聲明文件 .d.ts，并且會(huì)忽略 項(xiàng)目中關(guān)于 TypeScript 的自定配置，如：tsconfig.json、tsconfig.dev.js、tsconfig.prod.js 中的配置
  • bundleAnalyzerReport ：是否開啟構(gòu)建分析報(bào)告；
    • 類型： boolean
    • 默認(rèn)值： process.env.npm_config_report； 即：根據(jù)執(zhí)行命令時(shí)是否帶有 --report 選項(xiàng)來決定是否啟用 構(gòu)建分析報(bào)告；
  • bundleAnalyzerOptions ：構(gòu)建分析報(bào)告的配置選項(xiàng)； webpack-bundle-analyzer 的 webpack 插件選項(xiàng)對(duì)象；
    • 類型： Object
    • 默認(rèn)值： bundleAnalyzerOptions.analyzerPort 的默認(rèn)值是 "auto"
    • 詳細(xì)信息： https://github.com/webpack-contrib/webpack-bundle-analyzer
    • 注意： 如果你配置了多個(gè)構(gòu)建目標(biāo) multipleTargets ，并且以 server 模式（這是默認(rèn)的模式）開啟了 構(gòu)建分析報(bào)告，則建義采用以下任意一種方案來對(duì) bundleAnalyzerOptions.analyzerPort 進(jìn)行設(shè)置，這樣可以防止針對(duì)每個(gè)構(gòu)建目標(biāo)啟動(dòng)一個(gè) 構(gòu)建分析報(bào)告 時(shí)，因服務(wù)端口被占用而啟動(dòng)失敗：
      • 方案1（這是默認(rèn)的設(shè)置）：將 所有構(gòu)建目標(biāo)公共的 projectConfig.bundleAnalyzerOptions.analyzerPort 設(shè)置為 auto ；
      • 方案2：分別給每一個(gè) 構(gòu)建目標(biāo)的 bundleAnalyzerOptions.analyzerPort 設(shè)置一個(gè)不同的值；
  • dev：開發(fā)模式的配置選項(xiàng)對(duì)象
    • 類型： Object
    • 可配置的屬性如下：
      • outputDir ：輸出目錄，一個(gè)絕對(duì)路徑；與 webpack 的 output.path 選項(xiàng)相同；
        • 類型： string
        • 詳細(xì)信息： https://webpack.docschina.org/configuration/output/#output-path
        • 注意：
          • 如果你使用的是 ESLint，建議你將該處配置的輸出目錄 增加到 ESLint 的忽略配置文件中一般在項(xiàng)目根目錄下的 .eslintignore 文件中）；
          • 如果你使用的是 TypeScript，建議你將該處配置的輸出目錄 增加到 項(xiàng)目根目錄下的 TypeScript 配置選項(xiàng)（一般在配置文件 tsconfig.json 中）的 排除字段 "exclude" 下，如：
          "exclude":[
  "dist",
  "dev"
]

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

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

    * cssSourceMap ：CSS source map 的開關(guān)；用于控制是否生成 CSS 的 source map；
        - **類型：** `boolean`
        - **默認(rèn)值：** `false`
  • build：生產(chǎn)模式的配置選項(xiàng)對(duì)象
    • 類型： Object
    • 可配置的屬性如下：
      • outputDir ：輸出目錄，一個(gè)絕對(duì)路徑；與 webpack 的 output.path 選項(xiàng)相同；
        • 類型： string
        • 詳細(xì)信息： https://webpack.docschina.org/configuration/output/#output-path
        • 注意：
          • 如果你使用的是 ESLint，建議你將該處配置的輸出目錄 增加到 ESLint 的忽略配置文件中一般在項(xiàng)目根目錄下的 .eslintignore 文件中）；
          • 如果你使用的是 TypeScript，建議你將該處配置的輸出目錄 增加到 項(xiàng)目根目錄下的 TypeScript 配置選項(xiàng)（一般在配置文件 tsconfig.json 中）的 排除字段 "exclude" 下，如：
          "exclude":[
  "dist",
  "dev"
]

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

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

10. npm包管理配置文件

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

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

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

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

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

11. Webpack配置文件

library-webpack-template 中包含了4個(gè) webpack 配置文件：

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

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

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

12. TypeScript配置文件

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

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

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

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

13. 代碼檢查

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

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

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

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

有您的支持，我會(huì)在開源的道路上，越走越遠(yuǎn) 贊賞碼

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 中文翻譯 ng help ng build 構(gòu)建您的應(yīng)用程序并將其放入輸出路徑（dist /默認(rèn)情況下）。 別名：...
    4ea0af17fd67閱讀 2,062評(píng)論 0贊 0
  • webpack使用學(xué)習(xí) 本分享學(xué)習(xí)借鑒webpack中文官網(wǎng)，官網(wǎng)鏈接(中文文檔)：https://www.web...
    腿毛怪丶叔叔閱讀 899評(píng)論 0贊 5
  • 前端將大型項(xiàng)目分成一個(gè)個(gè)單獨(dú)的模塊，一般封裝好的每個(gè)模塊都會(huì)實(shí)現(xiàn)一個(gè)目的明確的完成的功能。如何處理這些模塊以及模塊...
    pixels閱讀 3,449評(píng)論 1贊 14
  • 原文首發(fā)于：Webpack 3，從入門到放棄 Update (2017.8.27) : 關(guān)于 output.pub...
    昵稱都被用完了衰閱讀 1,925評(píng)論 4贊 19
  • 這年頭，你不背上幾句廣告詞，都不好意思說你有文化、有內(nèi)涵。下面我們就來揭曉本屆魔性廣告奧斯卡獎(jiǎng)各獎(jiǎng)項(xiàng)獲獎(jiǎng)名單。 N...
    KEVIN0603閱讀 3,478評(píng)論 0贊 1