??如果引入js文件順序錯了則會報錯。 乍一看似乎沒什么難度呀，是人都能分清是吧。那么請看下面這種情況：
??有 a.js, b.js, c.js, d.js, e.js 五個文件，其中

a 依賴 b和e，

b 依賴 d和e，

c 依賴 a和d，

d 依賴 e，

e 無依賴。

??那么根據以上關系，請按正確順序引入js文件（黑人問號？？？）。當然，事實上也并不難區分其優先級，逐級遞推就很快可以推斷出引入順序為 e,d,b,a,c。

　　毫無疑問，對于稍微復雜點的web工程，存在復雜依賴情況是極有可能發生的，并且把時間耗費在管理依賴關系上也不值當。

　　所以就誕生了前端模塊化

??經歷了混亂加載的黑歷史，我們終于迎來了js的模塊化，忽如一夜春風來，一夜之間冒出一堆模塊化標準。

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

　　當然除了這兩個，還有各類其他開發者開發的模塊加載器，當真是一番群魔亂舞百家爭鳴的盛世呀。在此就不一一細述了。

　　下面有請我們的主角出廠： ES6 Module。

　　ES6 Module 是新一代javascript標準 ECMAScript 6 的新增特性，其語法和Python相似，比較簡潔易用。另外，相比于其他模塊加載器，ES6 Module 是語法級別的實現，其靜態代碼分析相比于其他框架會更快更高效，方便做代碼檢測。

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

　　
??而且，且不論其API優劣，其語法與前面說的模塊化有什么區別的，ES6 Module最大優點是顯而易見的： 它是官方標準，而不是其他妖艷賤貨第三方開發的框架/庫。跟著有名分的原配混，毫無疑問是有前途更穩定的吧。

　　當然，缺點也是很明顯的，不同于RequireJS，SeaJS 向下兼容到極致（ie6+），ES6 Module 的兼容性還未覆蓋絕大部分瀏覽器，支持ES6 Module的瀏覽器寥寥無幾，雖然可以通過babel進行語法轉譯，不過兼容性畢竟是硬傷，唯有時間能治愈。

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

　　grunt 和 gulp 就是自動化構建工具。我們通過安裝對應的node_module，根據gulp/grunt 的API編寫相對應的任務（如：css預處理，代碼合并壓縮，代碼校驗檢查等任務，js代碼轉譯），那么就可以生成我們想要的結果，完成前端工作流管理，極大程度地提高效率。其作用其實就相當于makefile 的make 操作，將手工操作自動化，其任務編寫格式如下。

// gulp scss預處理任務
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" }));
});

??前面說了那么多SeaJS，RequireJS的模塊化 ，又有gulp ，grunt的自動化處理，想必都有點覺得這前端工程化的技術棧也太繁瑣了吧。

　　那么現在，你可以統統不用管啦，讓我們推出終極解決方案：Webpack。　　

　　相比于seajs / requirejs 需要在瀏覽器引入 sea.js 、require.js 的模塊解析器文件，瀏覽器才能識別其定義的模塊。 webpack不需要在瀏覽器中加載解釋器，而是直接在本地將模塊化文件（無論是AMD，CMD規范還是ES6 Module）編譯成瀏覽器可識別的js文件。

　　另外，相對于gulp/grunt 的批處理工作流功能，webpack 也可以通過 loader、plugin的形式對所有文件進行處理，來實現類似的功能。

　　其主要工作方式是： 整個項目存在一個或多個入口js文件，通過這個入口找到項目的所有依賴文件，通過loader，plugin進行處理后，打包生成對應的文件，輸出到指定的output目錄中。可以說是集模塊化與工作流于一身的工具。

　　當然，webpack也并非銀彈。工具沒有好壞，只有適合與否。即便是webpack也并非適用于所有場合。

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

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

??廢話少說，talk is easy , show me the code，我們來看看webpack是怎么工作的。以下是一個配置了webpack-dev-server的本地開發webpack配置文件。 具體可訪問 github 地址 查看完整信息

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

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


module.exports = {
    entry: {                 // 入口文件，打包通過入口，找到所有依賴的模塊，打包輸出
        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，有對應的loader，該文件才能作為模塊被webpack識別
            {
                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時可以省略“.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, 如需局域網內其他及其通過ip訪問，配置"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 變量定義，，可在其他模塊訪問到該變量值，以便根據不同環境來進行不同情況的打包操作。
    //  例如，在main.js 下 console.log( process.env.Node_ENV ) 輸出 development字符串
    new webpack.DefinePlugin({
        "process.env": {     
            NODE_ENV: `"development"`
        }
    }),

])