摘要：基本配置項(xiàng)基本配置項(xiàng)。的插件架構(gòu)主要基于實(shí)現(xiàn)的，這個(gè)就是專注于事件的廣播和操作。開啟多進(jìn)程，加快打包速度。

這次我們主要研究的是webpack框架的相關(guān)知識(shí)，webpack是一個(gè)打包構(gòu)建的前端框架，用于解決前端開發(fā)的模塊化問題。

說到webpack，肯定你還會(huì)想到gulp和grunt這些框架，那么webpack是做什么的呢？他和其他的框架有什么區(qū)別呢？我們一起來分析一下。
在這一段落中我們主要對(duì)webpack和gulp進(jìn)行縱向的比較分析：
webpack的根本任務(wù)是進(jìn)行打包，把在一個(gè)文件中引用的另外一個(gè)文件，都打包在一起。
gulp根本任務(wù)是實(shí)現(xiàn)自動(dòng)化，其實(shí)我們自己可以寫一段node腳本實(shí)現(xiàn)所有js文件的壓縮。gulp就是封裝好腳本來幫我們做這些事
還有：
webpack其實(shí)也可以實(shí)現(xiàn)js文件的壓縮，但是這只不過是在完成打包任務(wù)的大背景下，所完成的額外任務(wù)

那么使用場景呢？我在什么情況下該用webpack，我在什么情況下該用gulp，筆者認(rèn)為，這就仁者見仁智者見智了，如果說，你就是在開發(fā)工程中為了打包，為了模塊化，那么你一定要用webpack啊，還有你希望實(shí)現(xiàn)解析sass直接放入html中，那么這可以用webpack實(shí)現(xiàn)，在打包的過程中就順手完成了。但是，你初次之外，還想實(shí)現(xiàn)，在上線構(gòu)建的時(shí)候，把圖片上傳cdn并且替換鏈接，那么你就需要額外引入gulp。webpack和gulp都有自己的長處和短處，分析好這兩個(gè)框架，你就可以在使用過程中如魚得水。

基本配置項(xiàng)。我們首先說說如何定義基本配置項(xiàng)，第一是我們可以shell的方式，定義配置，都寫在命令行上，但是這種方式不好，配置項(xiàng)一多，執(zhí)行的命令就特別長。因此我們一般采用的都是配置文件的方式。

const path = require("path");

module.exports = {
  // entry 表示 入口，Webpack 執(zhí)行構(gòu)建的第一步將從 Entry 開始，可抽象成輸入。
  // 類型可以是 string | object | array   
  entry: "./app/entry", // 只有1個(gè)入口，入口只有1個(gè)文件
  entry: ["./app/entry1", "./app/entry2"], // 只有1個(gè)入口，入口有2個(gè)文件
  entry: { // 有2個(gè)入口
    a: "./app/entry-a",
    b: ["./app/entry-b1", "./app/entry-b2"]
  },

  // 如何輸出結(jié)果：在 Webpack 經(jīng)過一系列處理后，如何輸出最終想要的代碼。
  output: {
    // 輸出文件存放的目錄，必須是 string 類型的絕對(duì)路徑。
    path: path.resolve(__dirname, "dist"),

    // 輸出文件的名稱
    filename: "bundle.js", // 完整的名稱
    filename: "[name].js", // 當(dāng)配置了多個(gè) entry 時(shí)，通過名稱模版為不同的 entry 生成不同的文件名稱
    filename: "[chunkhash].js", // 根據(jù)文件內(nèi)容 hash 值生成文件名稱，用于瀏覽器長時(shí)間緩存文件

    // 發(fā)布到線上的所有資源的 URL 前綴，string 類型
    publicPath: "/assets/", // 放到指定目錄下
    publicPath: "", // 放到根目錄下
    publicPath: "https://cdn.example.com/", // 放到 CDN 上去

    // 導(dǎo)出庫的名稱，string 類型
    // 不填它時(shí)，默認(rèn)輸出格式是匿名的立即執(zhí)行函數(shù)
    library: "MyLibrary",

    // 導(dǎo)出庫的類型，枚舉類型，默認(rèn)是 var
    // 可以是 umd | umd2 | commonjs2 | commonjs | amd | this | var | assign | window | global | jsonp ，
    libraryTarget: "umd", 

    // 是否包含有用的文件路徑信息到生成的代碼里去，boolean 類型
    pathinfo: true, 

    // 附加 Chunk 的文件名稱
    chunkFilename: "[id].js",
    chunkFilename: "[chunkhash].js",

    // JSONP 異步加載資源時(shí)的回調(diào)函數(shù)名稱，需要和服務(wù)端搭配使用
    jsonpFunction: "myWebpackJsonp",

    // 生成的 Source Map 文件名稱
    sourceMapFilename: "[file].map",

    // 瀏覽器開發(fā)者工具里顯示的源碼模塊名稱
    devtoolModuleFilenameTemplate: "webpack:///[resource-path]",

    // 異步加載跨域的資源時(shí)使用的方式
    crossOriginLoading: "use-credentials",
    crossOriginLoading: "anonymous",
    crossOriginLoading: false,
  },

  // 配置模塊相關(guān)
  module: {
    rules: [ // 配置 Loader
      {  
        test: /.jsx?$/, // 正則匹配命中要使用 Loader 的文件
        include: [ // 只會(huì)命中這里面的文件
          path.resolve(__dirname, "app")
        ],
        exclude: [ // 忽略這里面的文件
          path.resolve(__dirname, "app/demo-files")
        ],
        use: [ // 使用那些 Loader，有先后次序，從后往前執(zhí)行
          "style-loader", // 直接使用 Loader 的名稱
          {
            loader: "css-loader",      
            options: { // 給 html-loader 傳一些參數(shù)
            }
          }
        ]
      },
    ],
    noParse: [ // 不用解析和處理的模塊
      /special-library.js$/  // 用正則匹配
    ],
  },

  // 配置插件
  plugins: [
  ],

  // 配置尋找模塊的規(guī)則
  resolve: { 
    modules: [ // 尋找模塊的根目錄，array 類型，默認(rèn)以 node_modules 為根目錄
      "node_modules",
      path.resolve(__dirname, "app")
    ],
    extensions: [".js", ".json", ".jsx", ".css"], // 模塊的后綴名
    alias: { // 模塊別名配置，用于映射模塊
       // 把 "module" 映射 "new-module"，同樣的 "module/path/file" 也會(huì)被映射成 "new-module/path/file"
      "module": "new-module",
      // 使用結(jié)尾符號(hào) $ 后，把 "only-module" 映射成 "new-module"，
      // 但是不像上面的，"module/path/file" 不會(huì)被映射成 "new-module/path/file"
      "only-module$": "new-module", 
    },
    alias: [ // alias 還支持使用數(shù)組來更詳細(xì)的配置
      {
        name: "module", // 老的模塊
        alias: "new-module", // 新的模塊
        // 是否是只映射模塊，如果是 true 只有 "module" 會(huì)被映射，如果是 false "module/inner/path" 也會(huì)被映射
        onlyModule: true, 
      }
    ],
    symlinks: true, // 是否跟隨文件軟鏈接去搜尋模塊的路徑
    descriptionFiles: ["package.json"], // 模塊的描述文件
    mainFields: ["main"], // 模塊的描述文件里的描述入口的文件的字段名稱
    enforceExtension: false, // 是否強(qiáng)制導(dǎo)入語句必須要寫明文件后綴
  },

  // 輸出文件性能檢查配置
  performance: { 
    hints: "warning", // 有性能問題時(shí)輸出警告
    hints: "error", // 有性能問題時(shí)輸出錯(cuò)誤
    hints: false, // 關(guān)閉性能檢查
    maxAssetSize: 200000, // 最大文件大小 (單位 bytes)
    maxEntrypointSize: 400000, // 最大入口文件大小 (單位 bytes)
    assetFilter: function(assetFilename) { // 過濾要檢查的文件
      return assetFilename.endsWith(".css") || assetFilename.endsWith(".js");
    }
  },

  devtool: "source-map", // 配置 source-map 類型

  context: __dirname, // Webpack 使用的根目錄，string 類型必須是絕對(duì)路徑

  // 配置輸出代碼的運(yùn)行環(huán)境
  target: "web", // 瀏覽器，默認(rèn)
  target: "webworker", // WebWorker
  target: "node", // Node.js，使用 `require` 語句加載 Chunk 代碼
  target: "async-node", // Node.js，異步加載 Chunk 代碼
  target: "node-webkit", // nw.js
  target: "electron-main", // electron, 主線程
  target: "electron-renderer", // electron, 渲染線程

  externals: { // 使用來自 JavaScript 運(yùn)行環(huán)境提供的全局變量
    jquery: "jQuery"
  },

  stats: { // 控制臺(tái)輸出日志控制
    assets: true,
    colors: true,
    errors: true,
    errorDetails: true,
    hash: true,
  },

  devServer: { // DevServer 相關(guān)的配置
    proxy: { // 代理到后端服務(wù)接口
      "/api": "http://localhost:3000"
    },
    contentBase: path.join(__dirname, "public"), // 配置 DevServer HTTP 服務(wù)器的文件根目錄
    compress: true, // 是否開啟 gzip 壓縮
    historyApiFallback: true, // 是否開發(fā) HTML5 History API 網(wǎng)頁
    hot: true, // 是否開啟模塊熱替換功能
    https: false, // 是否開啟 HTTPS 模式
    },

    profile: true, // 是否捕捉 Webpack 構(gòu)建的性能信息，用于分析什么原因?qū)е聵?gòu)建性能不佳

    cache: false, // 是否啟用緩存提升構(gòu)建速度

    watch: true, // 是否開始
    watchOptions: { // 監(jiān)聽模式選項(xiàng)
    // 不監(jiān)聽的文件或文件夾，支持正則匹配。默認(rèn)為空
    ignored: /node_modules/,
    // 監(jiān)聽到變化發(fā)生后會(huì)等300ms再去執(zhí)行動(dòng)作，防止文件更新太快導(dǎo)致重新編譯頻率太高
    // 默認(rèn)為300ms 
    aggregateTimeout: 300,
    // 判斷文件是否發(fā)生變化是不停的去詢問系統(tǒng)指定文件有沒有變化，默認(rèn)每秒問 1000 次
    poll: 1000
  },
}

以上我們就是webpack中大部分的配置項(xiàng)，其實(shí)我們可以發(fā)現(xiàn)，最重要四個(gè)是entry、output、loader和plugin分別代表入口，出口，加載器和插件。具體的配置信息和其他的配置項(xiàng)就不一一介紹了。
建議大家看一下webpack的官方文檔，具體了解一下每一個(gè)配置項(xiàng)的含義，就算都記不下來，也最好有點(diǎn)印象。

首先我們看一下webpack的整體原理：
初始化參數(shù)：從配置文件和 Shell 語句中讀取與合并參數(shù)，得出最終的參數(shù)；
開始編譯：用上一步得到的參數(shù)初始化 Compiler 對(duì)象，加載所有配置的插件，執(zhí)行對(duì)象的 run 方法開始執(zhí)行編譯；
確定入口：根據(jù)配置中的 entry 找出所有的入口文件；
編譯模塊：從入口文件出發(fā)，調(diào)用所有配置的 Loader 對(duì)模塊進(jìn)行翻譯，再找出該模塊依賴的模塊，再遞歸本步驟直到所有入口依賴的文件都經(jīng)過了本步驟的處理；
完成模塊編譯：在經(jīng)過第4步使用 Loader 翻譯完所有模塊后，得到了每個(gè)模塊被翻譯后的最終內(nèi)容以及它們之間的依賴關(guān)系；
輸出資源：根據(jù)入口和模塊之間的依賴關(guān)系，組裝成一個(gè)個(gè)包含多個(gè)模塊的 Chunk，再把每個(gè) Chunk 轉(zhuǎn)換成一個(gè)多帶帶的文件加入到輸出列表，這步是可以修改輸出內(nèi)容的最后機(jī)會(huì)；
輸出完成：在確定好輸出內(nèi)容后，根據(jù)配置確定輸出的路徑和文件名，把文件內(nèi)容寫入到文件系統(tǒng)。

然后我們?cè)倏匆幌聎ebpack中plugin的原理
在使用htmlWebpackPluin的過程中，發(fā)現(xiàn)打包出的index.html文件，js引用了兩次，由于自己了解plugin的原理，于是動(dòng)手寫了一個(gè)。
webpack 的插件架構(gòu)主要基于Tapable實(shí)現(xiàn)的，這個(gè)Tapable就是專注于事件的廣播和操作。在webpack的編譯過程中會(huì)廣播很多事件，插件可以自己去監(jiān)聽這些事件，在webpack執(zhí)行到相應(yīng)的時(shí)機(jī)做某些操作，然后插件也可以廣播事件。
下面就是具體api的實(shí)現(xiàn)了，webpack中有complier對(duì)象，代表webpack實(shí)例。有編譯的具體參數(shù)。還有一個(gè)complation代表本次編譯，有打包的文件等信息。
在complier上面綁定plugin和apply。在回調(diào)函數(shù)中傳入complation對(duì)象。

plugins: [
    function () {
        this.plugin("done", (stats) => {
            stats.toJson(true).chunks.filter(c => c.entry).forEach(c => {
                let fileContent = fs.readFileSync((path.join(BUILD_PATH, "views/main.pug"))).toString("utf-8")
                fs.writeFileSync(path.join(BUILD_PATH, "views/main.pug"), fileContent.replace(/webpack-bundle.*src="(.*)"/g, (match, p1) => {
                    return match.replace(p1, PUBLIC_PATH + c.files[0])
                }))
            })
        })
    }
]

css-loader中importLoaders=1參數(shù)的問題
問題是加載的css文件中import了一個(gè)css文件，雖然可以被引入最后的html中，但是引入的css未經(jīng)過postcss的處理，因此加上了這個(gè)，就ok了

Mac平臺(tái)和Windows平臺(tái)的差異導(dǎo)致的問題

// 配置entry選項(xiàng)時(shí)：
entry: {
    main: __dirname + "/src/index.js"
}
// /和的問題
const path = require("path");
const entryPath = path.resolve(__dirname, "/src/index.js");
entry: {
    main: entryPath
}

不能滿足業(yè)務(wù)需求，自定義plugin的經(jīng)過
如上

縮小查找文件的范圍
利用loader中的exclude和include。
利用reslove中的moudules，這個(gè)可以在require時(shí)指明存放第三方模塊的路徑。

利用動(dòng)態(tài)鏈接庫
利用插件DllPlugin，可以打包出一個(gè)個(gè)多帶帶的動(dòng)態(tài)鏈接庫文件。原因在于包含大量復(fù)用模塊的動(dòng)態(tài)鏈接庫只需要編譯一次，在之后的構(gòu)建過程中被動(dòng)態(tài)鏈接庫包含的模塊將不會(huì)在重新編譯，而是直接使用動(dòng)態(tài)鏈接庫中的代碼。

開啟打包編譯多進(jìn)程
運(yùn)行在Node.js之上的webpack是單線程模型的，也就是說webpack需要處理的任務(wù)需要一件件挨著做，不能多個(gè)事情一起做。利用插件HappyPack，webpack中最耗時(shí)的就是loader這一步，HappyPack它把任務(wù)分解給多個(gè)子進(jìn)程去并發(fā)的執(zhí)行，子進(jìn)程處理完后再把結(jié)果發(fā)送給主進(jìn)程。

提取公共代碼
利用CommonsChunkPlugin插件提取公共代碼。

htmlWebpackPlugin用來自動(dòng)向html文件中加入js和css的文件引入。
CommonsChunkPlugin可以打包公共部分代碼（聽說4.0已經(jīng)不用了）。
HappyPack開啟多進(jìn)程，加快打包速度。