WebPack 包括带有 Summernote 的整个文件夹（添加了神秘的 ^\.\/.*$）

Question

不知道为什么，但是当通过 WebPack 将 Summernote 导入到构建中时，WebPack 最终拉入了整个 dist 文件夹，因此抱怨该文件夹中的 fonts/images 等不是有效的 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：一个表达式加上前 and/or 后缀字符串（即 require("./templates/" + expr))
unknownContext：require 的任何其他无法解析的用法（即 require）

并且 unkownContext 有一个默认的 Regular Express 将尝试匹配文件：^\.\/.*$；因此，出于某种原因，您的项目包含无法解析的要求。 webpack打包的时候，会解析一个文件夹下的所有文件，并尝试匹配require。

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

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

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

修改后，我的webpack过程顺利通过。你可以试试。

更新

虽然上面的配置可以让webpack通过，但是问题依然存在。无法解析的 require 会导致运行时出现问题，最好找到不正确的 require 并改正它。

关于我的 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 的整个文件夹（添加了神秘的 ^\.\/.*$）

WebPack includes entire folder (mysterious ^\.\/.*$ added) with Summernote

summernote

webpack

webpack-dev-server