摘要：但是由于缺乏規(guī)范化管理，出現(xiàn)了很多種模塊化規(guī)范，從針對的規(guī)范，到針對瀏覽器端的，終于在里規(guī)范了前端模塊化?？梢酝ㄟ^兩種方式之一終端或。導(dǎo)出多個配置對象運行時，所有的配置對象都會構(gòu)建。在階段又會發(fā)生很多小事件。

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

雖然前端開發(fā)在模塊化進(jìn)程上搞得風(fēng)生水起，但是有個問題就是：源代碼無法直接運行，必須通過構(gòu)建工具轉(zhuǎn)換后才可以正常運行?；趎odejs常見的構(gòu)建工具有g(shù)ulp、fis3、webpack。

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

1.通過 gulp.task注冊一個任務(wù);
2.通過 gulp.run 執(zhí)行任務(wù);
3.通過 gulp.watch 監(jiān)聽文件的變化;
4.通過 gulp.src 讀取文件:
5.通過 gulp.dest 寫文件。

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

Fis3 是一個來自百度的國產(chǎn)構(gòu)建工具。相對于Gulp只提供了基本功能的工具，F(xiàn)is3集成了Web開發(fā)中的常用構(gòu)建功能，如下所述。

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

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

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

Webpack的優(yōu)點是 :

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

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

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

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

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

output 屬性告訴 webpack 在哪里輸出它所創(chuàng)建的 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 可以將所有類型的文件轉(zhuǎn)換為 webpack 能夠處理的有效模塊，然后你就可以利用 webpack 的打包能力，對它們進(jìn)行處理。

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

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

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

通過mode參數(shù)配置，開啟開發(fā)或者生產(chǎn)環(huán)境下的webpack內(nèi)置優(yōu)化。

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

設(shè)置模塊如何被解析。
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 解析模塊時應(yīng)該搜索的目錄

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

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

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.導(dǎo)出promise
webpack 將運行由配置文件導(dǎo)出的函數(shù)，并且等待 Promise 返回。便于需要異步地加載所需的配置變量。

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

3.導(dǎo)出多個配置對象
運行 webpack 時，所有的配置對象都會構(gòu)建。例如，導(dǎo)出多個配置對象，對于針對多個構(gòu)建目標(biāo)（例如 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
告訴服務(wù)器從哪里提供內(nèi)容。只有在你想要提供靜態(tài)文件時才需要。devServer.publicPath 將用于確定應(yīng)該從哪里提供 bundle，并且此選項優(yōu)先。

默認(rèn)情況下，將使用當(dāng)前工作目錄作為提供內(nèi)容的目錄，但是你可以修改為其他目錄：

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

2.publicPath

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

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

3.host

host: "0.0.0.0" //服務(wù)器外部可訪問

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 的構(gòu)建流程可以分為以下三大階段：

啟動構(gòu)建，讀取與合并配置參數(shù)，加載 Plugin，實例化 Compiler。

**:從 Entry 發(fā)出，針對每個 Module 串行調(diào)用對應(yīng)的 Loader 去翻譯文件的內(nèi)容， 再找到該Module 依賴的 Module，遞歸地進(jìn)行編譯處理 。

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

將編譯后的 Module 組合成 Chunk，將 Chunk 轉(zhuǎn)換成文件，輸出到文件系統(tǒng)中 。