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

Question

的WebPack提供下面的例子及其在匀场文档 。 在该页面的全球出口部分中，给出以下示例。

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 （由于export-loader ，即使deps.js没有export语句）：

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特定的配置一起使用。

（这来自另一个答案 ）。

为了做到这一点，你需要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方法），而且我不习惯其他有效语法。 我在您的代码段中看到了这一点：

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

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