zoukankan      html  css  js  c++  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.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文件中的内容。代码下载

  • 相关阅读:
    怎么在java 8的map中使用stream
    在java 8 stream表达式中实现if/else逻辑
    Lambda表达式最佳实践
    java并发Exchanger的使用
    java中functional interface的分类和使用
    java 8 Streams简介
    一篇文章让你彻底弄懂SSL/TLS协议
    基于口令的密码(PBE)
    更加安全的密钥生成方法Diffie-Hellman
    有关密钥的最全总结都在这了
  • 原文地址:https://www.cnblogs.com/xfshen/p/5942585.html
Copyright © 2011-2022 走看看