在反应应用程序的 webpack 配置中查询预设与加载程序

Posted 2023-02-24

【中文标题】在反应应用程序的 webpack 配置中查询预设与加载程序

【英文标题】：Queries presets vs loaders in webpack config in react app

【发布时间】：2016-07-09 15:59:34

【问题描述】：

现在我尝试将a library 包含到应用程序中，使用与 webpack 的反应。 这是我的 webpack 配置的一部分：

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'
  ]

但在库的描述中，还有另一种包含模块的方法：

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',
],,;

我们看不到“查询”，但我们看到的是“加载程序”而不是“加载程序”。我应该如何在配置中包含库？

谢谢。

【参考方案1】：

在您的应用程序中包含库的最简单方法是要求或导入它。

如果你使用 commonjs 语法，你会这样做：

var React = require('react');

如果你使用的是 ES6 语法：

import React from 'react';

通过这样做，当 webpack 打包你的文件时，依赖项将被捆绑在一起。

loader 和 loader 之间的区别在于，对于 loader，只有一个 loader 会处理您的文件，而在使用 loader 时，您可以让不同的 loader 像管道一样处理文件。请注意，加载程序是从右到左执行的。

查询是一种将参数传递给加载程序的方法。你不能定义一个查询参数和多个加载器。

如果您需要将参数传递给加载器，并且需要为同一文件类型使用多个加载器，则可以通过为每个对象使用一个加载器来实现，如下所示：

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

相同文件类型的加载器是从下到上执行的，所以上面的例子和这个是一样的：

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