??如果引入js文件順序錯(cuò)了則會(huì)報(bào)錯(cuò)。 乍一看似乎沒(méi)什么難度呀，是人都能分清是吧。那么請(qǐng)看下面這種情況：
??有 a.js, b.js, c.js, d.js, e.js 五個(gè)文件，其中

a 依賴(lài) b和e，

b 依賴(lài) d和e，

c 依賴(lài) a和d，

d 依賴(lài) e，

e 無(wú)依賴(lài)。

??那么根據(jù)以上關(guān)系，請(qǐng)按正確順序引入js文件（黑人問(wèn)號(hào)？？？）。當(dāng)然，事實(shí)上也并不難區(qū)分其優(yōu)先級(jí)，逐級(jí)遞推就很快可以推斷出引入順序?yàn)?e,d,b,a,c。

　　毫無(wú)疑問(wèn)，對(duì)于稍微復(fù)雜點(diǎn)的web工程，存在復(fù)雜依賴(lài)情況是極有可能發(fā)生的，并且把時(shí)間耗費(fèi)在管理依賴(lài)關(guān)系上也不值當(dāng)。

　　所以就誕生了前端模塊化

??經(jīng)歷了混亂加載的黑歷史，我們終于迎來(lái)了js的模塊化，忽如一夜春風(fēng)來(lái)，一夜之間冒出一堆模塊化標(biāo)準(zhǔn)。

??其中具有代表性的模塊加載器分別是是遵循AMD（Asynchronous Module Definition）規(guī)范的RequireJS ，還有淘寶玉伯開(kāi)源的 遵循CMD（Common Module Definition）規(guī)范的 SeaJS。 兩者除了遵循規(guī)范不一樣之外，封裝模塊有差別之外，都各有所長(zhǎng)，而且對(duì)舊版本瀏覽器的支持都相當(dāng)完美。

　　當(dāng)然除了這兩個(gè)，還有各類(lèi)其他開(kāi)發(fā)者開(kāi)發(fā)的模塊加載器，當(dāng)真是一番群魔亂舞百家爭(zhēng)鳴的盛世呀。在此就不一一細(xì)述了。

　　下面有請(qǐng)我們的主角出廠： ES6 Module。

　　ES6 Module 是新一代javascript標(biāo)準(zhǔn) ECMAScript 6 的新增特性，其語(yǔ)法和Python相似，比較簡(jiǎn)潔易用。另外，相比于其他模塊加載器，ES6 Module 是語(yǔ)法級(jí)別的實(shí)現(xiàn)，其靜態(tài)代碼分析相比于其他框架會(huì)更快更高效，方便做代碼檢測(cè)。

// import 基本語(yǔ)法
import React from "react";    //等價(jià)于 var React = require("react");
import { stat, exists, readFile } from "fs";
// 等價(jià)于 
// var fs = require("fs");
// var stat = fs.stat, exists = fs.exists, readFile = fs.readFile;

　　
??而且，且不論其API優(yōu)劣，其語(yǔ)法與前面說(shuō)的模塊化有什么區(qū)別的，ES6 Module最大優(yōu)點(diǎn)是顯而易見(jiàn)的： 它是官方標(biāo)準(zhǔn)，而不是其他妖艷賤貨第三方開(kāi)發(fā)的框架/庫(kù)。跟著有名分的原配混，毫無(wú)疑問(wèn)是有前途更穩(wěn)定的吧。

　　當(dāng)然，缺點(diǎn)也是很明顯的，不同于RequireJS，SeaJS 向下兼容到極致（ie6+），ES6 Module 的兼容性還未覆蓋絕大部分瀏覽器，支持ES6 Module的瀏覽器寥寥無(wú)幾，雖然可以通過(guò)babel進(jìn)行語(yǔ)法轉(zhuǎn)譯，不過(guò)兼容性畢竟是硬傷，唯有時(shí)間能治愈。

??從描述可知，前端工程化需要做的事情，單憑人力一個(gè)一個(gè)去處理基本沒(méi)有可能完成，那么，我們就需要學(xué)會(huì)使用工具，畢竟程序猿和猿之間最大的區(qū)別就是會(huì)不會(huì)使用工具。

　　grunt 和 gulp 就是自動(dòng)化構(gòu)建工具。我們通過(guò)安裝對(duì)應(yīng)的node_module，根據(jù)gulp/grunt 的API編寫(xiě)相對(duì)應(yīng)的任務(wù)（如：css預(yù)處理，代碼合并壓縮，代碼校驗(yàn)檢查等任務(wù)，js代碼轉(zhuǎn)譯），那么就可以生成我們想要的結(jié)果，完成前端工作流管理，極大程度地提高效率。其作用其實(shí)就相當(dāng)于makefile 的make 操作，將手工操作自動(dòng)化，其任務(wù)編寫(xiě)格式如下。

// gulp scss預(yù)處理任務(wù)
gulp.task("styles", function() {
  return gulp.src("src/styles/main.scss")
    .pipe(sass({ style: "expanded" }))
    .pipe(autoprefixer("last 2 version", "safari 5", "ie 8", "ie 9", "opera 12.1", "ios 6", "android 4"))
    .pipe(gulp.dest("dist/assets/css"))
    .pipe(rename({suffix: ".min"}))
    .pipe(minifycss())
    .pipe(gulp.dest("dist/assets/css"))
    .pipe(notify({ message: "Styles task complete" }));
});

??前面說(shuō)了那么多SeaJS，RequireJS的模塊化 ，又有g(shù)ulp ，grunt的自動(dòng)化處理，想必都有點(diǎn)覺(jué)得這前端工程化的技術(shù)棧也太繁瑣了吧。

　　那么現(xiàn)在，你可以統(tǒng)統(tǒng)不用管啦，讓我們推出終極解決方案：Webpack?！　?br>
　　相比于seajs / requirejs 需要在瀏覽器引入 sea.js 、require.js 的模塊解析器文件，瀏覽器才能識(shí)別其定義的模塊。 webpack不需要在瀏覽器中加載解釋器，而是直接在本地將模塊化文件（無(wú)論是AMD，CMD規(guī)范還是ES6 Module）編譯成瀏覽器可識(shí)別的js文件。

　　另外，相對(duì)于gulp/grunt 的批處理工作流功能，webpack 也可以通過(guò) loader、plugin的形式對(duì)所有文件進(jìn)行處理，來(lái)實(shí)現(xiàn)類(lèi)似的功能。

　　其主要工作方式是： 整個(gè)項(xiàng)目存在一個(gè)或多個(gè)入口js文件，通過(guò)這個(gè)入口找到項(xiàng)目的所有依賴(lài)文件，通過(guò)loader，plugin進(jìn)行處理后，打包生成對(duì)應(yīng)的文件，輸出到指定的output目錄中?？梢哉f(shuō)是集模塊化與工作流于一身的工具。

　　當(dāng)然，webpack也并非銀彈。工具沒(méi)有好壞，只有適合與否。即便是webpack也并非適用于所有場(chǎng)合。

　　webpack 的最大特點(diǎn)是一切皆為模塊，一切全包，最適和應(yīng)用在SPA一站式應(yīng)用場(chǎng)景。只有簡(jiǎn)單幾個(gè)頁(yè)面的情況下使用 webpack 反而可能會(huì)增加不必要的配置成本，反而直接用gulp或者其他工具處理代碼壓縮，css 預(yù)處理之類(lèi)的工作會(huì)更加快捷易用。

　　另外，除了最主流的 webpack 之外，同性質(zhì)的模塊化打包器還有 browserIfy，以及百度的 fis ，由于對(duì)這兩者了解不多，就不一一比較了。

??廢話少說(shuō)，talk is easy , show me the code，我們來(lái)看看webpack是怎么工作的。以下是一個(gè)配置了webpack-dev-server的本地開(kāi)發(fā)webpack配置文件。 具體可訪問(wèn) github 地址 查看完整信息

// webpack.dev.config.js
let path = require("path"),
      webpack = require("webpack");

let resolve = path.resolve;
let webRootDir = resolve(__dirname, "../");


module.exports = {
    entry: {                 // 入口文件，打包通過(guò)入口，找到所有依賴(lài)的模塊，打包輸出
        main: resolve(webRootDir, "./src/main.js"), 
    },
    output: {
        path: resolve(webRootDir, "./build"),  // 輸出路徑
        publicPath: "/build/",     // 公共資源路徑
        filename: "[name].js"      // 輸出文件名字，此處輸出main.js, babel-polyfill.js ,  視情況可以配置[name].[chunkhash].js添加文件hash, 管理緩存
    },
    module: {
        rules: [   //模塊化的loader，有對(duì)應(yīng)的loader，該文件才能作為模塊被webpack識(shí)別
            {
                test: /.js$/,
                loader: "babel-loader",
                exclude: /node_modules/
            },
            {
                test: /.(png|jpg|gif|svg|ico)$/,
                loader: "file-loader",
                options: {
                    name: "[name].[ext]?[hash]"
                }
            },
            {
                test: /.(eot|svg|ttf|woff|woff2)(?S*)?$/,
                loader: "file-loader"
            },
            {
                test: /.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /.scss$/,
                loader: "style-loader!css-loader!autoprefixer-loader?{browsers:["last 5 version", "Firefox" +
                " 15"]}!sass-loader?sourceMap&outputStyle=compressed"
            }
        ]
    },

    resolve: {
        extensions: [".js"],  // 定義后綴名 ，import時(shí)可以省略“.js”后綴
        alias: {   // 別名。 如 import "./src/style/common.css"  ==> import "style/common.css"
            "components": resolve(webRootDir, "./src/components"),
            "page": resolve(webRootDir, "./src/page"),
            "style": resolve(webRootDir, "./src/style"),
            "script": resolve(webRootDir, "./src/script"),
            "static": resolve(webRootDir, "./static")
        }
    },

    devServer: { // webpack-dev-server 熱加載的配置
        host: "127.0.0.1",   //本地ip, 如需局域網(wǎng)內(nèi)其他及其通過(guò)ip訪問(wèn)，配置"0.0.0.0"即可
        port: 8080,
        disableHostCheck: true,
        historyApiFallback: true,
        noInfo: true
    },

    performance: {
        hints: false
    },

}

module.exports.devtool = "#source-map"

/*插件*/
module.exports.plugins = (module.exports.plugins || []).concat([
    // webpack 變量定義，，可在其他模塊訪問(wèn)到該變量值，以便根據(jù)不同環(huán)境來(lái)進(jìn)行不同情況的打包操作。
    //  例如，在main.js 下 console.log( process.env.Node_ENV ) 輸出 development字符串
    new webpack.DefinePlugin({
        "process.env": {     
            NODE_ENV: `"development"`
        }
    }),

])