一直想深入學(xué)學(xué) Webpack旬牲，無(wú)奈被其他技術(shù)的學(xué)習(xí)一直耽擱了伟端，對(duì)于 Webpack 還僅僅停留在會(huì)使用的階段中蚤吹，以前剛開(kāi)始時(shí)嘗試深入過(guò)球榆，但因?yàn)槲丛羞^(guò)很好的模塊開(kāi)發(fā)經(jīng)驗(yàn)而對(duì)很多功能不是理解娃兽，強(qiáng)烈建議還是有些項(xiàng)目的開(kāi)發(fā)流程在腦中才有必要去深入 Webpack

現(xiàn)如今個(gè)人很喜歡邊學(xué)邊記菇民，一方面是為了保留零碎的知識(shí)點(diǎn)，也是為自己創(chuàng)立個(gè)在線的 API，然而最近花出了很多的時(shí)間在惡補(bǔ)英語(yǔ)第练，可能每天來(lái)學(xué)技術(shù)的時(shí)間并不是很多阔馋，也并不基于快速的將其學(xué)會(huì)，重在積累娇掏！

本文只是我學(xué)習(xí)的個(gè)人總結(jié)呕寝，基本都是從官網(wǎng)以及各種材料上將自己覺(jué)得重要又不是很了解的知識(shí)點(diǎn)進(jìn)行記錄，以簡(jiǎn)短精華為核心婴梧，想必應(yīng)該并不會(huì)適合新手作為學(xué)習(xí)的閱讀材料下梢，反而應(yīng)該適合對(duì) Webpack 有過(guò)一半以上的了解并作為復(fù)習(xí)或填補(bǔ)深度

這一篇只是初步的嘗鮮，既然決定深入 webpack塞蹭，那肯定要用多個(gè)篇幅來(lái)詳細(xì)分析

一. 入口（Entry）

1. 單個(gè)入口

• entry: string | Array<string>
• entry: { main: string | Array<string> }
• entry 為路徑數(shù)組時(shí)也是單個(gè)入口孽江，是將所有路徑文件打包為一個(gè)

2. 對(duì)象語(yǔ)法

• entry: { [entryChunkName: string]: string | Array<string> }

二. 輸出（Output）

• output: {
    filename: string,
    path: string,
  },
  

• 可以使用以下占位符
  • [name]
  • [hash]

三. 解析器（Loader）

• module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: { modules: true },
          },
        ],
      },
      { test: /\.ts$/, use: 'ts-loader' },
    ],
  },
  

• 可以在 import 或任何等效于 import 的方式中指定 loader，使用 ! 將資源中的 loader 分開(kāi)
• Loader 特性
  • loader 支持鏈?zhǔn)絺鬟f番电，能夠?qū)Y源使用流水線岗屏，一組鏈?zhǔn)降?loader 將按照先后順序進(jìn)行編譯，loader 鏈中的第一個(gè) loader 返回值給下一個(gè) loader漱办，在最后一個(gè) loader 这刷，返回 webpack 所預(yù)期的 JavaScript
  • loader 可以是同步的，也可以是異步的
  • loader 運(yùn)行在 Node.js 中娩井，并且能夠執(zhí)行任何可能的操作
  • loader 接收查詢參數(shù)暇屋，用于對(duì) loader 傳遞配置
  • 除了使用 package.json 常見(jiàn)的 main 屬性，還可以將普通的 npm 模塊導(dǎo)出為 loader洞辣，需要在 package.json 里定義一個(gè) loader 字段
  • loader 能夠產(chǎn)生額外的任意文件
• loader 模塊需要導(dǎo)出為一個(gè)函數(shù)咐刨，并且使用 Node.js 兼容的 JavaScript 編寫(xiě)（如何編寫(xiě) loader？）
• loader 列表

四. 插件（Plugins）

• plugins: [ new Plugins(), ]
• webpack 插件是一個(gè)具有 apply 屬性的 JavaScript 對(duì)象屋彪，apply 屬性會(huì)被 webpack compiler 調(diào)用所宰，并且 compiler 對(duì)象可在整個(gè)編譯生命周期訪問(wèn)
• 由于插件可以攜帶參數(shù)或選項(xiàng)绒尊，必須在 webpack 中畜挥，向 plugins 屬性傳入 new 實(shí)例

五. 模塊解析（Module Resolution）

1. 絕對(duì)路徑

• 由于已經(jīng)取得絕對(duì)路徑，因此不需要進(jìn)一步再做解析

2. 相對(duì)路徑

• 使用 import 或 require 的資源文件所在的目錄被認(rèn)為是上下文目錄婴谱，以此產(chǎn)生絕對(duì)路徑

3. 模塊路徑

• 模塊將在 resolve.modules 中指定的所有目錄內(nèi)搜索蟹但，你可以替換初識(shí)模塊路徑，此替換路徑通過(guò)使用 resolve.alias 配置選項(xiàng)來(lái)創(chuàng)建一個(gè)別名
• 一旦根據(jù)上述規(guī)則解析路徑后谭羔，解析器將檢查路徑是否指向文件或目錄华糖，如果路徑指向一個(gè)文件：
  • 如果路徑具有文件擴(kuò)展名，則被直接將文件打包
  • 否則瘟裸，將使用 resolve.extensions 選項(xiàng)作為文件擴(kuò)展名來(lái)解析客叉，此選項(xiàng)告訴解析器在解析中能夠接受哪些擴(kuò)展名（例如 .js）
• 如果路徑指向一個(gè)文件夾，則采取以下步驟找到具有正確擴(kuò)展名的正確文件：
  • 如果文件夾中包含 package.json 文件，則按照順序查找 resolve.mainFields 配置選項(xiàng)中指定的字段兼搏，并且 package.json 中的第一個(gè)這樣的字段確定文件路徑
  • 如果 package.json 文件不存在或者 package.json 文件中的 main 字段沒(méi)有返回一個(gè)有效路徑卵慰，則按照順序查找 resolve.mainFiles 配置選項(xiàng)中指定的文件名，看是否能在 import/require 目錄下匹配到一個(gè)存在的文件名
  • 文件擴(kuò)展名通過(guò) resolve.extensions 選項(xiàng)采用類似的方法進(jìn)行解析

六. 構(gòu)建目標(biāo)（Targets）

• target: string
• 因?yàn)榉?wù)器和瀏覽器代碼都可以用 JavaScript 編寫(xiě)佛呻，所以 webpack 提供了多種構(gòu)建目標(biāo)裳朋，可以在 webpack 配置中設(shè)置