为什么 Webpack 文档中的“exports-loader”示例不起作用？

Question

Webpack 在其shimming documentation 中提供了以下示例。在该页面的global exports 部分，它给出了以下示例。

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: require.resolve('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'); }
};

但是当我尝试构建时，我得到：

ERROR in ./webpack.config.js
Module not found: Error: Can't resolve 'globals.js' in '/workspace/my-app'

为什么globals.js 没有解决，为什么他们文档中的示例假设它会解决？我错过了什么吗？谢谢。

Answer 1

让它与全局 exports-loader 配置一起工作

我使用以下设置进行此操作：

src/deps.js // 这个文件只是声明了一个全局的file变量

const file = 'this is the file';

src/app.js // webpack 包的入口点。它是import 的deps.js（即使deps.js 没有export 声明，感谢export-loader）：

import file from './deps.js'
console.log(file);

webpack.config.js // webpack 配置文件

module.exports = {
  entry: __dirname + '/src/app.js',
  mode: 'development',
  module: {
    rules: [
      {
        test: /deps.js/,
        use: 'exports-loader?file',
      }
    ]
  }
}

package.json // 这样我们就可以在项目本地运行 webpack

{
  "name": "exports-loader-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "webpack": "node_modules/webpack/bin/webpack.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "exports-loader": "^0.7.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  }
}

使用此设置，假设 webpack.config.js、package.json 和 src/ 位于项目的根目录中，请执行以下操作：

$ npm run webpack

要捆绑脚本，然后：

$ node dist/main.js 检查file 变量是否正在加载（将其加载到浏览器中也会这样做）。

让它与 import 特定配置一起工作。

（来自this other answer）。

为此，您只需use exports-loader，在webpack.config.js 中加载时无需任何进一步配置：

use: 'exports-loader',

然后在每个import 语句中指定要包装在export 子句中的变量：

import file from 'exports-loader?file!./deps.js'

为什么require.resolve() 语法不起作用？

我真的不知道。据我所知，test 子句需要一个正则表达式（这就是为什么它实际上被称为 test，因为 javascript 中正则表达式的 test 方法）而且我不习惯其他类型的有效语法。我在你的 sn-p 中看到了这一点：

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

use 值没有字符串引号。我想知道这是否破坏了配置，然后您会收到误导性错误，我不知道。我实际上相信您只是在复制粘贴到堆栈溢出时没有粘贴引号。