问题标签 [exports-loader]

webpack 的文档列出了一个有趣的模式，用于填充设置属性的模块window，例如window.XModule = {...}.

https://webpack.github.io/docs/shimming-modules.html#the-file-sets-a-property-on-window-window-xmodule

将模式应用到 ES6，我得到了这样的结果：

我试图了解 Webpack 如何处理此语句，具体来说，该imports-loader部分扮演什么角色，imports?window=>{}. 我知道exports-loader基本上设置XMODULE为window.XModule来自依赖项。至于imports-loader，似乎它所做的只是不允许window对象被依赖项污染......但是如何？

如何与imports?window=>{}结合使用exports?window.XModule？

我正在使用 webpack，angular 1.x 并具有以下代码

效果很好，但问题是包含的文件太大（angularjs - 1.15mb）。使用 angularjs 的缩小版本当然会更好，但是当我将代码更改为

它不能正常工作，我的意思是它似乎angular.min.js没有导出适当angular的对象。

使用缩小版库的正确方法是什么？

最近，我一直在考虑将我们的构建过程Grunt从webpack-2. 我们的代码完全使用 requirejs 以 AMD 格式编写。出于演示的目的，我将发布index.js我们正在使用的文件的简约版本。

这是通过提交文件并通过 npm 加载的 jQuery-1.6.4 的链接。请暂时原谅。jQuery-1.6.4

index.js

对应require-config.js文件：

我尝试使用我们的 AMD 方法，但想使用 webpack-2 捆绑所有内容。我浏览了文档和各种博客，发现了使所有东西都像一个魅力一样工作的配置，除了旧的黄金 jQuery。

这里是webpack.config.js

生成的文件会webpack-2抛出一个未定义的错误，$.fn即它不是$一个 jQuery 函数，而是一个普通的空对象。虽然 window.$ 已定义并返回正确的 jQuery 函数，但为什么我没有得到相同的结果$。在 AMD 的情况下，我得到了正确的结果，因为$它处于闭包中并返回 1.6.4 jQuery。使用 webpack，它的行为很奇怪。

!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(1), __webpack_require__(13) ], __WEBPACK_AMD_DEFINE_RESULT__ = function ($, urlUtils) { ... }

我还尝试了哪些其他方法：

1. { test: /jQuery/, loader: 'expose-loader?$'
2. { test: /jQuery/, loader: 'exports-loader?jQuery=jQuery,$=jQuery,this=>window'
3. { test: /jQuery/, loader: 'exports-loader?this=>window'
4. { test: /jQuery/, loader: 'expose-loader?$=jQuery'

不能使用externals属性，因为它会污染 thw window.jQuery，并且由于该库被注入/加载到用户的网站上，这将破坏目标源上的内容。

请帮我！我现在对这个奇怪的 jQuery 事情感到沮丧。

我使用仅浏览器的 lib js-aruco 。这就是为什么我尝试填充那个库。我这样做：

在捆绑包中，我可以看到包含的库 - 但module.exports = CV缺少。但是 - 一个类似的案例正在起作用：

在这里我可以看到出口。Ofc 此代码失败，因为它需要正确加载 CV，但事实并非如此。

我直接从入口点需要的模块已使用导出加载器正确加载。但是，当将 export-loader 与 ar.js 使用的 cv.js 一起使用时，它会被包含在我的条目中，它只会被忽略。

加载程序未执行。

所以我的问题是：为什么未执行 export-loader？

PS：我的 webpack 配置是可以想象的最简单的。只有输入和输出

我在 reactJS 中编写了一个渲染树的组件

我无法将其直接导入浏览器并不断收到此错误：

babel 预设是 react-app：

构建的入口点是 index.js：

你能帮我找出我的构建步骤中有什么问题吗？

我有 2 个旧 JS 文件，我不想更改。出于这个原因，我想使用exports-loader和imports-loader

文件 B-legacy 需要来自 File A-legacy的全局变量 GLOB

我的 webpack.config.js 结果

据我了解，这应该有效。我正在导出 A-legacy 中的 GLOB var，并希望将其导入 B-legacy。

但是构建它会出现以下错误：

./Scripts/legacy/B-legacy.js 中的错误模块未找到：错误：无法解析“C:\anypath\Scripts\legacy”中的“GLOB”@ ./Scripts/legacy/A-legacy.js 2 :11-26

我已经尝试将 enforce: "pre" 添加到 exports-loader 规则。但这并没有改变任何东西

我正在尝试在 npm 包中使用旧版 JavaScript 分发到其他项目。

如果我在 webpack 的 export-loader 的帮助下将 Javascript 文件直接导入其中一个项目，我就可以毫无问题地使用所有功能。

但是，如果我将 npm 包导入到我遇到问题的项目之一。我认为我在 npm 包中的 webpack 设置设置不正确。

npm 包：

我来自 npm-package 的 webpack 配置：

当我将此模块导入我的项目并调用 printEan 时，我得到“未捕获的 ReferenceError：finishedFunction 未定义”。这表明它找到了 printEan 函数和 BrowserPrint，但不知何故，旧脚本中的代码没有被 webpack 正确处理。

查看遗留脚本的代码finishedFunction 从未定义，但是当我直接在其他项目中导入脚本时，我不知道为什么它会起作用。

旧代码的片段：

我正在尝试将它exports-loader与我的 webpack 配置一起使用，但是在尝试配置它时遇到了问题。

webpack.config.js

./src/globals.js

./src/index.js

我的应用程序构建良好，但是当我尝试运行它时，我得到：

WebpackOptionsValidationError：配置对象无效。Webpack 已使用与 API 模式不匹配的配置对象进行初始化。

• 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

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

Webpack 在其shimming 文档中提供了以下示例。在该页面的全局导出部分，它给出了以下示例。

webpack.config.js

./src/globals.js

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

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