Webpack使用教程四（Loaders）

Loaders是webpack最有用的特性之一，通過Loaders，webpack可以預處理源碼文件中的Json文件或者將包含新特性的Javascript代碼轉換成瀏覽器能處理的JavaScript代碼等。如果你使用React，那么Loaders可以預處理React JSX，將其轉化成JavaScript代碼。Loaders需要單獨安裝，並且要在webpack.config.js的modules選項下進行配置。Loaders的設置選項如下：

設置選項	描述
test	設置要匹配的文件擴展名的正則表達式
loader	要使用的loader
include/exclude	設置loader要包含或者忽略的目錄或文件
query	向loader傳遞額外的條件選項

　　

下面我們來看下如何使用Loaders預處理Json文件（需要用npm安裝json-loader）（代碼下載）：

1、待處理的Json文件和Js代碼：

// config.json
{
    "greetText": "Hi there and greetings from Json!"
}

//Greeter.js
var config = require('./config.json')
module.exports = function() {
    var greet = document.createElement('div');
    greet.textContent = config.greetText;
    return greet;
};

//main.js
var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter());

2、設置webpack配置文件

module.exports = {
    devtool: 'eval-source-map',
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    },
    module: { loaders: [{ test: /\.json$/, loader: "json" }] },
    devServer: {
        contentBase: "./public",
        colors: true,
        historyApiFallback: true,
        inline: true
    }
};

運行webpack，直接打開index.html就可以看到json文件中的內容。代碼下載