在webpack配置中使用require.resolve会产生运行时错误：“提供的值” ...“不是绝对路径！”

Question

我正在尝试将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：无效的配置对象。已使用与API架构不匹配的配置对象初始化了Webpack。

     

  
• 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

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

Answer 1

让exports-loader工作

Exports loader是一个Webpack加载器，它允许将exports句子动态添加到与其一起加载的javascript文件中。例如，您的globals.js文件中没有任何export，只有file和helpers变量，但是使用exports-loader它可以工作好像它有export子句。

加载webpack加载器

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

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

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

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

这是-afaik-使用装载程序的最常用方法。但是，Webpack具有许多配置选项和不同的有效语法。

执行此操作后，当webpack找到require或import再次是globals.js文件时，它将使用exports-loader。

另一方面，exports-loader的工作方式是修改require调用以指示其如何在所需文件中提取变量。就像他们的文档中一样：

file.js

const file = 'foo';

app.js

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

因此，基本上，您需要做两件事才能使exports-loader起作用：

1. 使用require或import及其特殊语法。

2. 像往常一样将加载程序加载到webpack.config.js中（他们会在其文档中跳过此操作）。

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

因此，坏消息是exports-loader在每个require或import语句中都需要某种特殊的格式来实现其魔术。您只是无法在尝试时在配置文件中指定此设置（或者，至少我不知道如何设置）。

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

• 如上所述修复您的webpack.config.js。
• 更改您的index.js文件，使其使用exports-loader 魔术：

import file from 'exports-loader?file!./deps.js'
console.log('the file', file);