你的位置:首页 > Java教程

[Java教程]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.jsvar config = require('./config.json')module.exports = function() {  var greet = document.createElement('div');  greet.textContent = config.greetText;  return greet;};//main.jsvar 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文件中的内容。代码下载