为什么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的{​​{1}}（即使deps.js没有deps.js语句，也要感谢export）：

export-loader

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

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

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

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

使用此设置，假设{ "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特定配置一起使用。

（来自this other answer）。

为此，您只需import use，而将其加载到exports-loader时无需任何其他配置：

webpack.config.js

然后在每个use: 'exports-loader',语句中指定要包装在export子句中的变量：

import

为什么import file from 'exports-loader?file!./deps.js'语法不起作用？

我真的不知道。据我所知，require.resolve()子句期望使用正则表达式（这就是为什么之所以称为test的原因，因为javascript中的正则表达式的test方法）并且我不习惯其他有效的语法。我在您的代码段中看到了这一点：

test

module.exports = { module: { rules: [ { test: require.resolve('globals.js'), use: exports-loader?file,parse=helpers.parse } ] } } 值没有字符串引号。我不知道这是否破坏了配置，然后您得到一个误导性错误，我不知道。我实际上相信您只是在复制和粘贴到堆栈溢出时没有粘贴引号。