Question

现在我尝试将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',
}],},};

我们没有看到＆＃34;查询＆＃34;但我们看到＆＃34;装载机＆＃34;相反＆＃34;装载机＆＃34;。我应该如何在配置中包含库？

感谢。

Answer 1

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

如果您使用的是commonjs语法，请执行以下操作：

var React = require('react');

如果您使用的是ES6语法：

import React from 'react';

通过执行此操作，当webpack捆绑您的文件时，依赖项将捆绑在一起。

加载器和加载器之间的区别在于，对于加载器，只有一个加载器将处理您的文件，并且当使用加载器时，您可以使用不同的加载器来处理文件，如管道。请注意，加载器从右到左执行。

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

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

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

相同文件类型的加载器从下到上执行，因此上面的示例与此相同：

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

在react app中的webpack配置中查询预设vs加载器

1 个答案: