CODEWITHSUNDEEP
reactjswebpackbabeljs
stepan lutaev
stepan lutaev

Reputation: 23

Queries presets vs loaders in webpack config in react app

Now I try to include a library into application, using react with webpack. Here is a piece of my webpack config:

module: {
  loaders: [{
    test: [/\.jsx$/,  /\.js$/],
    exclude: /(node_modules|bower_components)/,
    loader: 'babel',
    query: {presets: ['react', 'es2015']}
  },
  {
    test: /(\.scss|\.css)$/,
    loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[local]_[hash:base64:5]!postcss?sourceMap!sass!toolbox')
  },
  {
    test: /\.(png|jpg)$/,
    loader: 'url-loader?limit=8192'
  }]}

But in library's description there is another way to include modules:

module: {
loaders: [{
  test:[/\.jsx$/,  /\.js$/],
  loaders: ['react-hot', 'babel?stage=0&loose[]=es6.modules'],
  include: [
    path.resolve(__dirname, "src"),
    path.resolve(__dirname, "node_modules/flash-notification-react-redux")
  ],
}, {
  test: [/\.scss$/, /\.css$/],
  loader: 'css?localIdentName=[path]!postcss-loader!sass',
}],},};

We don't see "queries" but we see "loaders" instead "loader". How should I include library in config?

Thanks.

Upvotes: 1

Views: 2001

Answers (1)

thitemple
thitemple

Reputation: 6059

The easiest way to include a library in your application is by requiring it or importing it.

If you're using commonjs syntax you'd do this:

var React = require('react');

If you're using ES6 syntax:

import React from 'react';

By doing this, when webpack bundles your files, the dependencies will be bundled together.

The difference between loaders and loader, is that with loader, there's just one loader that will process your files, and when using loaders, you can have different loaders processing the files like a pipe. Note that loaders are executed from right to left.

Query is a way to pass parameters to a loader. You can't define a query parameter and multiple loaders.

If you need to pass parameters to a loader and you need to use multiple loaders for the same file type, you can do so by using one loader per object like so:

module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style',
        query: {}
      },
      {
        test: /\.css$/,
        loader: 'css',
        query: {}
      }
    ]
  }

Loaders for the same file type are executed from bottom to top, so the above example is the same as this one:

module: {
    loaders: [
      {
        test: /\.css$/,
        loaders: ['style',  'css']
      }
    ]
  }

Upvotes: 3

Related Questions