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

  • 相关阅读:
    更多的bash命令
    简单的Writer和Reader
    矩阵的基本知识
    在Java中如何实现“Pless presss any key to continue.”
    递归思想解决输出目录下的全部文件
    初学File类
    如何避免遭受HTTS中间人攻击
    中间人攻击破解HTTPS传输内容
    LINE最新版6.5.0在iOS上的删除信息取证
    JB for iOS 9.3
  • 原文地址:https://www.cnblogs.com/xfshen/p/5942585.html
Copyright © 2011-2022 走看看