1、Loaders

Loaders是webpack中最強大的功能之一了。通過使用不同的loader，webpack通過調用外部的腳本或工具可以對各種各樣的格式的文件進行處理，如分析JSON文件並把它轉換為JavaScript文件；或把下一代的JS文件（ES6，ES7)轉換為現代瀏覽器可以識別的JS文件；或對React的開發而言，合適的Loaders可以把React的JSX文件轉換為JS文件。

Loaders需要單獨安裝並且需要在webpack.config.js下的modules關鍵字下進行配置。安裝命令為npm install --save-dev json-loader，Loaders的配置選項包括以下幾方面：

繼續上面的例子，把Greeter.js裏的問候消息放在一個單獨的JSON文件裏，並通過合適的配置使Greeter.js可以讀取該JSON文件的值，配置方法如下

module.exports = {  
    devtool: ‘eval-source-map‘, // 配置生成Source Maps，選擇合適的選項  
    entry:  __dirname + "/app/main.js", // 已多次提及的唯一入口文件  
    output: {  
        path: __dirname + "/public", // 打包後的文件存放的地方  
        filename: "bundle.js" // 打包後輸出文件的文件名  
    },  
    module: { // 在配置文件裏添加JSON loader  
        loaders: [  
            {  
                test: /\.json$/,  
                loader: "json-loader"  
            }  
        ]  
    },  
    devServer: {  
        contentBase: "./public", // 本地服務器所加載的頁面所在的目錄  
        colors: true, // 終端中輸出結果為彩色  
        historyApiFallback: true, // 不跳轉  
        inline: true // 實時刷新  
    }  
}  

2、Babel

Loaders很好，不過有的Loaders使用起來比較復雜，如Babel。

Babel其實是一個編譯JavaScript的平臺，它的強大之處表現在可以通過編譯達到以下目的：

1) 下一代的JavaScript標準（ES6，ES7），這些標準目前並未被當前的瀏覽器完全的支持；

2) 使用基於JavaScript進行了拓展的語言，如React的JSX。

Babel其實是幾個模塊化的包，其核心功能位於稱為babel-core的npm包中，不過webpack把它們整合在一起使用，但是對於每一個需要的功能或拓展，都需要安裝單獨的包（用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）。

一次性安裝這些依賴包（npm一次性安裝多個依賴模塊，模塊之間用空格隔開）：

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

在webpack中配置Babel的方法如下（在webpack.config.js的module部分的loaders裏進行配置即可）：

module.exports = {  
    devtool: ‘eval-source-map‘,//配置生成Source Maps，選擇合適的選項  
    entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件  
    output: {  
        path: __dirname + "/public",//打包後的文件存放的地方  
        filename: "bundle.js"//打包後輸出文件的文件名  
    },  
    module: {  
        loaders: [  
            {  
                test: /\.json$/,  
                loader: "json-loader"  
            },  
            {  
                test: /\.js$/,  
                exclude: /node_modules/,  
                loader: ‘babel‘,  
                query: {  
                    presets: [‘es2015‘,‘react‘]  
                }  
            }  
        ]  
    }  
}  

Babel的配置選項：

Babel其實可以完全在webpack.config.js中進行配置，但考慮到babel具有非常多的配置選項，在單一的webpack.config.js文件中進行配置往往使得這個文件顯得太復雜，因此一些開發者支持把babel的配置選項放在一個單獨的名為 ".babelrc" 的配置文件中。現在的babel的配置並不算復雜，不過之後會再加一些東西，因此現在就提取出相關部分，分兩個配置文件進行配置（webpack會自動調用.babelrc裏的babel配置選項），如下：

module.exports = {  
    devtool: ‘eval-source-map‘,//配置生成Source Maps，選擇合適的選項  
    entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件  
    output: {  
        path: __dirname + "/public",//打包後的文件存放的地方  
        filename: "bundle.js"//打包後輸出文件的文件名  
    },  
    module: {  
        loaders: [  
            {  
                test: /\.json$/,  
                loader: "json-loader"  
            },  
            {  
                test: /\.js$/,  
                exclude: /node_modules/,  
                loader: ‘babel‘  
            }  
        ]  
    }
}  

　　.babelrc：

{  
    "presets": ["react", "es2015"]  
}  

3、模塊

webpack的優點：把所有的文件都可以當做模塊處理，包括JavaScript代碼，也包括CSS和fonts以及圖片等，通過合適的loaders，它們都可以被當做模塊被處理。

1）CSS

webpack提供兩個工具處理樣式表，css-loader 和 style-loader，二者處理的任務不同，css-loader使得能夠使用類似@import 和 url(...)的方法實現 require()的功能，style-loader將所有的計算後的樣式加入頁面中，二者組合在一起能夠把樣式表嵌入webpack打包後的JS文件中。

安裝命令：npm install --save-dev style-loader css-loader

module.exports = {  
    devtool: ‘eval-source-map‘,//配置生成Source Maps，選擇合適的選項  
    entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件  
    output: {  
        path: __dirname + "/public",//打包後的文件存放的地方  
        filename: "bundle.js"//打包後輸出文件的文件名  
    },  
    module: {  
        loaders: [  
            {  
                test: /\.json$/,  
                loader: "json-loader"  
            },  
            {  
                test: /\.js$/,  
                exclude: /node_modules/,  
                loader: ‘babel‘,  
                query: {  
                    presets: [‘es2015‘,‘react‘]  
                }  
            },  
            {  
                test: /\.css$/,  
                loader: ‘style!css‘  
            }  
        ]  
    } 
}  

webpack----loader