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文件中的内容。代码下载