在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正常工作

導出加載程序是一個Webpack加載程序，它允許將exports語句動態添加到隨其加載的javascript文件中。 例如，您的globals.js文件中沒有任何export ，只有file和helpers變量，但是通過exports-loader它可以像具有export子句一樣工作。

加載webpack加載器

基本上，要使用加載程序，我們必須提供一個test和一個use子句。 該test可以是正則表達式，數組或對象，並且基本上可以確定哪些文件將使用某些加載程序。

use子句決定將哪些加載程序應用於與test正則表達式匹配的文件。

在這種情況下，我們應該-例如-指示globals.js用exports-loader加載globals.js ：

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

這是-afaik-使用裝載程序的最常用方法。 但是，Webpack具有許多配置選項和不同的有效語法。

一旦這樣做，當webpack找到一個require或一個globals.js再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中（他們會在其文檔中跳過此步驟）。

相反，您嘗試在webpack.config.js文件中使用此特定的exports-loader語法，然后將其與import 。

因此，壞消息是， exports-loader在每個require或import語句中都需要某種特殊的格式來發揮其魔力 。 您只是無法在嘗試時在配置文件中指定此設置（或者，至少我不知道如何設置）。

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

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

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