Question

不确定原因，但是当通过WebPack将Summernote导入构建时，WebPack最终会拉入整个dist文件夹，从而抱怨该文件夹中的字体/图像等无效JS。

从webpack输出中，您可以看到它按预期拉入summernotes dist js文件（在我的应用程序的源文件中找到var summernote = require('summernote');）。

  [149] ./~/summernote/dist/summernote.js 200 kB {1} [built]
  [150] ./~/summernote/dist ^\.\/.*$ 4.93 kB {1} [built] [5 warnings]

我不理解的是块150来自哪里，它是一个正则表达式，然后匹配dist文件夹中的每个项目。

WebPack具有非常基本的配置，导入的所有其他项目都按预期运行。

许多警告之一的一个例子：

WARNING in ./~/summernote/dist/font/summernote.ttf
Module parse failed: /<project>/node_modules/summernote/dist/font/summernote.ttf Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./~/summernote/dist ^\.\/.*$

chunk 150来自哪里，添加^\.\/.*$要求是什么。

Answer 1

当webpack通过require('expression')解析模块时，会有一个自动创建的上下文。有三种类型的自动创建的上下文：

exprContext：表达式作为依赖项（即require（expr））
wrappedContext：表达式加上前缀和/或后缀字符串（即require（“./ templates /”+ expr））
unknownContext：require的任何其他不可解析的用法（即e。require）

unkownContext有默认的正常快递会尝试匹配文件：^\.\/.*$; 因此，出于某种原因，您的项目包含不可解析的需求。当webpack打包它时，它将解析文件夹下的所有文件并尝试匹配require。

虽然我仍然不知道它将循环通过哪个文件夹，但这种行为会导致您的问题。

可能的解决方案：禁用未知的require处理。

javascript module: { // Disable handling of unknown requires unknownContextRegExp: /$^/, unknownContextCritical: false } Webpack Document for refer

修改后，我的webpack进程没有遇到任何问题。你可以尝试一下。

<强>更新

虽然上面的配置可以使webpack通过，但问题仍然存在。不可解析的需求会导致运行时出现问题，最好找到不正确的需求并使其正确。

关于我案例中的unparseable require：

CSV.js来自NPM的第三方js库，它包含以下声明：

var s = new require('stream').Transform({objectMode: true});

webpack将其编译为

var s = new __webpack_require__(227)('stream').Transform({ objectMode: true });

Webpack根据require 执行静态提取，它处理不带参数的require。

Webpack认为代码是

var some = require; var s = new some('stream').Transform({ objectMode: true });

虽然它应该是

var some = require('stream') var s = new some.Transform({ objectMode: true })

所以，我把这部分代码重写为

var stream = require('stream') var s = new stream.Transform({ objectMode: true })

问题终于解决了。

所以，找到无效的require，让它成为你唯一的解决方案。

WebPack包含整个文件夹（添加了神秘的^ \。\ /。*）和Summernote

1 个答案: