摘要：但是由于缺乏規范化管理，出現了很多種模塊化規范，從針對的規范，到針對瀏覽器端的，終于在里規范了前端模塊化。可以通過兩種方式之一終端或。導出多個配置對象運行時，所有的配置對象都會構建。在階段又會發生很多小事件。

隨著前端的迅速發展，web項目復雜度也是越來越高。為了便捷開發和利于優化，將一個復雜項目拆分成一個個小的模塊，于是模塊化開發出現了。但是由于缺乏規范化管理，出現了很多種模塊化規范，從針對nodejs的commonjs規范，到針對瀏覽器端的CMD、AMD，終于在ES6里規范了前端模塊化。

雖然前端開發在模塊化進程上搞得風生水起，但是有個問題就是：源代碼無法直接運行，必須通過構建工具轉換后才可以正常運行。基于nodejs常見的構建工具有gulp、fis3、webpack。

Gulp是一個基于流的自動化構建工具。 Gulp 被設計得非常簡單，只通過下面5種方法就可以支持幾乎所有構建場景:

1.通過 gulp.task注冊一個任務;
2.通過 gulp.run 執行任務;
3.通過 gulp.watch 監聽文件的變化;
4.通過 gulp.src 讀取文件:
5.通過 gulp.dest 寫文件。

Gulp的優點是好用又不失靈活，既可以多帶帶完成構建，也可以和其他工具搭配使用 。其缺點是集成度不高，要寫很多配置后才可以用，無法做到開箱即用 。

Fis3 是一個來自百度的國產構建工具。相對于Gulp只提供了基本功能的工具，Fis3集成了Web開發中的常用構建功能，如下所述。

1.讀寫文件: 通過 fis.match 讀文件，release 配置文件的輸出路徑。
2.資源定位: 解析文件之間的依賴關系和文件位置。
3.文件指紋: 在通過 useHash 配置輸出文件時為文件 URL 加上 md5 戳，來優化瀏覽器的緩存。
4.文件編譯: 通過 parser 配置文件解析器做文件轉換，例如將 ES6 編譯成 ES5。
5.壓縮資源: 通過 optimizer 配置代碼壓縮方法。
6.圖片合并: 通過 spriter 配置合并 css 里導入的圖片到一個文件中，來減少 Hπp 請求數。

Fis3的優點是集成了各種 Web 開發所需的構建功能，配置簡單、開箱即用 。
Fis3 是一種專注于 Web 開發的完整解決方案，如果將 Gulp 比作汽車的發動機， 則可以將 Fis3 比作 一輛完整的汽車。

Webpack 是一個打包模塊化 JavaScript 的工具，在 Webpack 里一 切文件皆模塊，通過 Loader轉換文件，通過 Plugin注入鉤子，最后輸出由多個模塊組合成的文件。 Webpack專注于構建模塊化項目。

Webpack的優點是 :

1.專注于處理模塊化的項目，能做到開箱即用、 一步到位:
2.可通過 Plugin 擴展，完整好用又不失靈活 ;
3.使用場景不局限于 Web 開發:
4.社區龐大活躍 ，經常引入緊跟時代發展的新特性，能為大多數場景找到已有的開源擴展:
5.良好的開發體驗 。

Webpack的缺點是只能用于采用模塊化開發的項目 。

webpack的工作就是把我們的靜態資源模塊通過遞歸形成依賴關系圖，然后將這些模塊打包成一個或多個 bundle文件。
它的核心api是entry、module（loader）、plugin、output、mode。接下來我們看一下這些api的功能及用法。

入口起點：構建依賴的開始，通過該起點文件尋找處理依賴

module.exports = {
  entry: "./path/to/my/entry/file.js"http://字符串形式
  entry: ["./path/to/my/entry/file.js","./path/to/my/entry/file1.js"]//數組形式
  entry: {
             name:"./path/to/my/entry/file.js",
             name1:"./path/to/my/entry/file1.js"
         }//對象形式
};

output 屬性告訴 webpack 在哪里輸出它所創建的 bundles，以及如何命名這些文件

const path = require("path");

module.exports = {
  entry: "./path/to/my/entry/file.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "my-first-webpack.bundle.js",
    filename: "[name].js",//多出口
    publicPath: "http://cdn.example.com/assets/[hash]/",//cdn + hash
  }
};

loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以將所有類型的文件轉換為 webpack 能夠處理的有效模塊，然后你就可以利用 webpack 的打包能力，對它們進行處理。

module.exports = {
    module: {
        rules: [
          { test: /.txt$/, use: "raw-loader" }
        ]
      }
}      

插件的使用范圍從打包優化和壓縮，一直到重新定義環境中的變量。插件接口功能極其強大，可以用來處理各種各樣的任務。通過使用 new 操作符來創建它的一個實例。

const HtmlWebpackPlugin = require("html-webpack-plugin"); // 通過 npm 安裝
module.exports = {
  module: {
    rules: [
      { test: /.txt$/, use: "raw-loader" }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: "./src/index.html"})
  ]
};

通過mode參數配置，開啟開發或者生產環境下的webpack內置優化。

module.exports = {
  mode: "production" //development
};

設置模塊如何被解析。
1.resolve.alias

import Utility from "../../utilities/utility";

alias: {
  Utilities: path.resolve(__dirname, "src/utilities/"),
  Templates: path.resolve(__dirname, "src/templates/")
}

使用alias配置別名，可以按下面方式引用
import Utility from "Utilities/utility";

2.resolve.modules
webpack 解析模塊時應該搜索的目錄

modules: [path.resolve(__dirname, "src"), "node_modules"]

webpack是需要傳入一個配置對象(configuration object)。可以通過兩種方式之一：終端或Node.js。
除了導出單個配置對象，還有可以有其他導出方式：
1.導出函數

module.exports = function(env, argv) {
  return {
    mode: env.production ? "production" : "development",
    devtool: env.production ? "source-maps" : "eval",
     plugins: [
       new webpack.optimize.UglifyJsPlugin({
        compress: argv["optimize-minimize"] // 只有傳入 -p 或 --optimize-minimize
       })
     ]
  };
};

2.導出promise
webpack 將運行由配置文件導出的函數，并且等待 Promise 返回。便于需要異步地加載所需的配置變量。

module.exports = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        entry: "./app.js",
        /* ... */
      })
    }, 5000)
  })
}

3.導出多個配置對象
運行 webpack 時，所有的配置對象都會構建。例如，導出多個配置對象，對于針對多個構建目標（例如 AMD 和 CommonJS）打包一個 library 非常有用。

module.exports = [{
  output: {
    filename: "./dist-amd.js",
    libraryTarget: "amd"
  },
  entry: "./app.js",
  mode: "production",
}, {
  output: {
    filename: "./dist-commonjs.js",
    libraryTarget: "commonjs"
  },
  entry: "./app.js",
  mode: "production",
}]

1.contentBase
告訴服務器從哪里提供內容。只有在你想要提供靜態文件時才需要。devServer.publicPath 將用于確定應該從哪里提供 bundle，并且此選項優先。

默認情況下，將使用當前工作目錄作為提供內容的目錄，但是你可以修改為其他目錄：

contentBase: path.join(__dirname, "public")//可以訪問publick文件夾下文件
contentBase: [path.join(__dirname, "public"), path.join(__dirname, "assets")]
contentBase: false

2.publicPath

此路徑下的打包文件可在瀏覽器中訪問。publicPath 總是以斜杠(/)開頭和結尾

publicPath: "/assets/"  //將打包后文件放入assets文件夾下，并可以通過瀏覽器訪問

3.host

host: "0.0.0.0" //服務器外部可訪問

4.hot

啟用 webpack 的模塊熱替換特性

5.proxy

proxy: {
  "/api": {
    target: "https://other-server.example.com",
    pathRewrite: {"^/api" : ""},//重寫url
    secure: false,//https
  }
}
//也可以通過context混合書寫
proxy: [{
  context: ["/auth", "/api"],
  target: "http://localhost:3000",
}]

待更新

Webpack 的構建流程可以分為以下三大階段：

啟動構建，讀取與合并配置參數，加載 Plugin，實例化 Compiler。

**:從 Entry 發出，針對每個 Module 串行調用對應的 Loader 去翻譯文件的內容， 再找到該Module 依賴的 Module，遞歸地進行編譯處理 。

在編譯階段中，最重要的事件是 compilation，因為在 compilation 階段調用了Loader, 完成了每個模塊的轉換操作。在 compilation 階段又會發生很多小事件。

將編譯后的 Module 組合成 Chunk，將 Chunk 轉換成文件，輸出到文件系統中 。