0

我正在尝试将它exports-loader与我的 webpack 配置一起使用，但是在尝试配置它时遇到了问题。

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: require.resolve('./src/globals.js'),
                use: 'exports-loader?file,parse=helpers.parse'
            }
        ]
    }
};

./src/globals.js

var file = 'blah.txt'
var helpers = {
    test: function() { console.log('test something'); },
    parse: function() { console.log('parse something'); }
}

./src/index.js

import { file } from './globals.js'
console.log('the file', file);

我的应用程序构建良好，但是当我尝试运行它时，我得到：

WebpackOptionsValidationError：配置对象无效。Webpack 已使用与 API 模式不匹配的配置对象进行初始化。

  • configuration.module.rules[0].test 应该是以下之一：
    • configuration.module.rules[0].test：提供的值“./src/globals.js”不是绝对路径！

为了完全清楚，我了解绝对路径和相对路径之间的区别，并且我知道我使用的值是相对路径。我的困惑有两个方面：

  1. require.resolve允许相对路径，为什么我不能在这里使用它？
  2. 如果我不能使用相对路径，我该如何引用该文件？

test我尝试对属性使用绝对路径，如下所示：

test: require.resolve(path.join(__dirname, 'src/globals.js'))

但是当我尝试运行时出现此错误：

错误：找不到模块'/workspace/my-app/dist/src/globals.js

所以我被困住了。如何正确配置此加载程序以正确引用该文件？

4

1 回答 1

0

开始exports-loader工作

Exports loader是一个 webpack 加载器，它允许动态地将exports句子添加到使用它加载的 javascript 文件中。例如，您的globals.js文件中没有任何export内容，只有fileandhelpers变量，但exports-loader它可以像有export子句一样工作。

加载 webpack 加载器

基本上，要使用加载器，我们必须提供 atest和 anuse子句。可以是正test则表达式、数组或对象，基本上它决定哪些文件将使用某些加载器。

该use子句决定哪些加载器将应用于与test正则表达式匹配的文件。

在这种情况下，我们应该——例如——指示 webpackglobals.js加载exports-loader：

  module: {
    rules: [
      {
        test: /globals.js/,
        use: 'exports-loader',
      }
    ]
  }

这是-afaik- 使用加载器的最常见方式。然而，Webpack 有很多配置选项和不同的有效语法。

一旦我们这样做了，当 webpack 找到一个或require另一个文件时，它将使用.importglobals.jsexports-loader

另一方面，exports-loader通过修改require调用来指示它如何在所需文件中提取变量。正如在他们的文档中一样：

文件.js

const file = 'foo';

应用程序.js

const file = require('exports-loader?file!./file.js');
console.log(file); // foo

所以，基本上你需要两件事才能开始exports-loader工作：

  1. 使用requireorimport与它们的特殊语法。

  2. 像往常一样加载加载器webpack.config.js（他们在文档中跳过了这个）。

相反，您尝试exports-loader在文件中使用此特定语法webpack.config.js，然后将其与import.

所以，坏消息是需要在每个or语句中进行exports-loader一些特殊的格式来发挥它的魔力。您只是无法在尝试时在配置文件中指定它（或者，至少，我不知道如何）。requireimport

因此，要使其正常工作，您需要：

  • webpack.config.js如上所述修复您的问题。
  • 更改您的index.js文件，使其使用exports-loader 魔法：
import file from 'exports-loader?file!./deps.js'
console.log('the file', file);
于 2019-03-11T16:18:48.543 回答