问题标签 [webpack-3]

很多人都问过这个问题，但它非常笼统，没有一个解决方案适用于我。重新启动我的电脑并重新运行 webpack 后，我的浏览器中突然出现标题错误。没有更改任何代码。有问题的未定义模块是 No 188，它似乎是一个绑定到 188 和 189 的模块（189 工作得很好）。看这里：

所有配置和源文件都在repo中，包括捆绑的块（node.build.js 和 main.build.js）。老实说，我不知道具体是什么触发了这个问题，重启只是一个猜测。它事先工作得很好。

当尝试访问util.js我在 webpack 中使用的文件中创建的模块module.exports时，它会在构建时产生一个空对象。在下图中，myconst utils = require(...)返回一个空对象。

但是，当我检查不使用 module.exports 的const utils = require(...)主脚本内部时，它已被定义。background-script.js

问题 Webpack 似乎没有解决require我正在使用的模块中的 's 我正在导出。

项目文件结构

应用程序/背景脚本.js

应用程序/utils.js

插件/index.js

插件1/index.js

Webpack3 带有一个ModuleConcatenation插件，当与--display-optimization-bailout标志一起使用时，它会给你提供救助的理由。

救助消息并不那么容易理解，而且很难理解为什么它们会发生在特定模块上。

这是我webpack的项目非常简化版本的命令输出：

./src/client/bootstrap/ErrorTrap.js我尽可能地简化了内容，但我仍然得到ModuleConcatenation bailout: Module is not an ECMAScript module. 以下是它的内容：

我研究了这个救助消息，它发生的原因之一是模块没有导入或导出，如https://github.com/webpack/webpack/blob/93ac8e9c3699bf704068eaccaceec57b3dd45a14/lib/dependencies/ HarmonyDetectionParserPlugin.js#L12-L14，但我不知道为什么不将此模块视为ECMAScript模块。

.babelrc

webpack.config.js表示：

我知道这是 webpack 的一个常见问题；如果它不会为您提供有关错误原因或位置的任何信息，那么调试某些东西真的很困难。

我收到错误：

我知道这与某处的语法错误有关，但我对 webpack 太陌生，无法弄清楚。

这是我的配置文件。它在根文件夹（即我最初运行的文件夹：npm init）中称为“webpack.config.js”。

我正在尝试使用 React 和 Webpack (3.4.1) 构建一个“组件库”。这个想法是让一个 React 应用程序使用React Cosmos以交互方式构建和探索可重用组件的“库”。该 repo 还将有一个build任务，它将这些组件编译成一个可以推送（到 Github 和/或 NPM）的文件。并且该文件/包可以导入到其他项目中以访问可重用组件。

注意/更新- 对于那些想自己尝试的人，我已将（非功能性）包发布到 NPM：https ://www.npmjs.com/package/rs-components 。只是yarn add你的项目（可能）遇到同样的问题。

我已经完成了 90% 的工作——React Cosmos 正在正确显示组件，并且我的构建任务 ( rimraf dist && webpack --display-error-details --config config/build.config.js) 正在运行且没有错误。但是，当我将 repo 作为一个包从 Github 拉入另一个项目时，我遇到了错误。

这些错误似乎源于 Webpack 没有正确导入我的组件库的依赖项。当我在构建时不缩小/破坏库时，我在导入时看到的第一个错误是：

TypeError: React.Component is not a constructor

事实上，如果我放入一个调试器并检查它，React 就是一个空对象。

如果我通过（作弊和）直接在node_modules( const React = require('../../react/react.js')) 中编译/下载的文件中导入 React 来解决这个问题，则不会发生该错误，但随后我遇到了与prop-types库导入失败有关的类似错误：

TypeError: Cannot read property 'isRequired' of undefined

因此，似乎虽然我的代码被正确提取，但组件库文件中的导入似乎没有被正确捆绑。

以下是大部分相关文件：

配置/build.config.js

一个示例组件：

复选框.js

Webpack 构建任务的“入口”文件webpack --config config/build.config.js（

src/index.js

最后，以下是编译后的未丑化 JS 中“导入”似乎未正确定义的变量的行：

• var React = __webpack_require__(1);
• /* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_prop_types__ = __webpack_require__(3);

让我知道是否还有其他可以帮助解决此问题的方法。超级困惑，所以我非常感谢任何帮助。

谢谢！

编辑

一堆东​​西似乎是正确导入的。当我在编译文件中抛出一个调试器并__webpack_require__(n)尝试尝试一大堆不同n的 s 时，我看到了不同的导入模块。不幸的是，React 和 PropTypes 似乎不在其中。

我正在为我的 CSS 使用css-loader和style-loader，但所有媒体查询都不起作用。我正在使用"webpack": "^3.4.1"和。"css-loader": "^0.28.4""style-loader": "^0.18.2"

这是我的 Webpack 配置：

我的css文件是这样的：

我正在用这样的React代码导入这个 CSS 文件：

信息：我正在使用 webpack 3.4.1 和 webpack-dev-server 2.5.1

使用下面的配置和'--hot --inline'，我得到一个非常慢的热重载。我可以删除“--hot”并快速重新加载，但我更愿意使用热重新加载动态更改 css。

common.js

和 dev.js

我尝试删除 Extract-Text-Plugin，但无济于事。关于使热重载快速的任何想法？我正在考虑禁用 vendor.js 的编译，但我不知道在这里添加它。谢谢。

生产文件夹中没有图像。有什么简单的方法可以解决 webpack 配置中的问题吗？

包.json

webpack.config.js

如果我去根目录 localhost:8080 使用 Html-webpack-plugin 它会按预期注入 javascript 如果我去 localhost:8080/test html 呈现但没有 js 被注入

服务器.js

webpack.config.js

我发现了一个与此类似的问题，他们的解决方案是配置 output.publicPath = '/' 我做了但仍然没有运气。我只是得到没有注入 JS 的模板

我在文件中有以下内容initialize.js：

在webpack.config.js我有：

我尝试删除插件和 的内容application.less，但我不断收到此错误：

如果我用一个文件替换该LESS文件CSS并更新配置它工作正常，所以我猜这个问题与less-loader有关。

我正在使用 Webpack 3.4.1、 Style Loader 0.18.2、 LESS Loader 4.0.5、 Extract Text Webpack Plugin3.0.0和 CSS Loader css-loader。