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