问题标签 [webpack-4]

我正在尝试将我的应用程序与 webpack 4 捆绑在一起，它是一个基于 Polymer 的应用程序，在 bower 和 HTML 文件中有依赖项

这是我的 webpack 配置：

当我运行 webpack 时，出现以下错误：

此导入../util-custom-types/imports/currency.html位于内部bower_components/util-custom-types/imports/currency.html，当我在polymer serve没有捆绑的情况下运行时，它可以工作。

看起来 webpack 里面缺少了一些东西

resolve: { modules: ['bower_components', 'node_modules'],

因为它不会在这些文件夹中查找文件。

这是失败的进口之一

我在互联网上尝试了一些插件，但由于 webpack 4 很新，很多插件都无法正常工作。

我知道如果我使用指向bower_components文件夹的导入链接，像这样，<link rel="import" href=".bower_components/util-custom-types/imports/currency.html">它会起作用，但这不是一个有效的解决方案，因为某些组件也有相同的导入方式，我无法修改它。

所以，总而言之，我想使用 html 导入，指向 bower_components 文件夹，如下所示：

<link rel="import" href="../util-custom-types/imports/currency.html">

到位于的文件

./bower_components/util-custom-types/imports/currency.html

在 webpack 4 中，没有引用 bower_components 目录。

有没有人做到这一点？

编辑：

我创建了一个示例 github 项目，其中只有一个从聚合物 init 创建的组件和一个 webpack 配置。

https://github.com/vlaraort/demo_polymer_webpack

重要的是成为一个组件，而不是一个应用程序，因为 polymer 的 html 导入并不指向 bower 组件，而在应用程序中，polymer 的 html 导入指向 bower_components。

零件：

<link rel="import" href="../polymer/polymer-element.html">

应用：

<link rel="import" href="../bower_components/polymer/polymer-element.html">

安装，npm i & bower i

运行工作的聚合物服务npm run polymer:dev 运行不工作的 webpack 服务npm run webpack:dev

正如您在 中看到的那样webpack:dev，聚合物元素导入正试图从http://localhost:8080/polymer/polymer-element.html而不是获取http://localhost:8080/bower_components/polymer/polymer-element.html，因此失败了。

因此，问题的目的是了解聚合物服务对进口有什么魔力，因为它解决了这个链接

<link rel="import" href="../polymer/polymer-element.html">

进入 bower_components，以及如何在 webpack 中重现该行为。

谢谢！

我正在尝试将Webpack 4用于我的项目。除extract-text-webpack-plugin.

实际行为：当我构建项目时，根本没有错误，而且文件也缩小了

预期行为：在文件夹中获取缩小的 CSS 文件 ( styles.css)dist

输出

文件结构

webpack.config

我正在尝试创建一个自定义加载程序，以便为 chrome 扩展生成 manifest.json 文件，由于某种原因，我无法通过 loaderUtils 访问“选项”对象，因为this它是一个空对象……是我还应该做些什么来确保 loaderRunner 调用我的 loader 函数并this正确初始化？

manifest-loader.js

webpack.config.js

我有两个条目：page1.js、page2.js。

我不想在两个条目之间提取共享代码。我只想提取 page2.js 中使用的 node_modules。

如何在 webpack 4 中实现这一点？谢谢。

我尝试使用 webpack 4 进行代码拆分（之前使用 webpack 3 的配置正常工作）

我创建了一个存储库来轻松重现我的问题：https ://github.com/iamdey/RD-webpack4-code-split

我通常会遇到以下错误，因为我想在供应商包中进行代码拆分和 babel-polyfill：

ReferenceError：未定义 regeneratorRuntime

配置

这是我的 webpack 配置：

问题

调试时，我们看到供应商在清单和最后应用程序之后立即加载。但是应用程序在供应商之前执行。

如果我删除了splitChunks选项，就像在清单之前一样，供应商会被加载，但供应商会在加载应用程序之前直接执行。在这种情况下，问题是拆分产生了不好的影响：块在供应商和应用程序中重复。

该怎么办 ？

以下是我的选择：

• 将 polyfill 放入应用程序包而不是供应商包中：我不想要那个
• 让 webpack 自己进行代码拆分：我不希望这样，因为在现实世界中，即使在供应商的版本之间，我也想要一个很长的缓存，并让应用程序尽可能小
• webpack 配置不正确：请告诉我 :)
• 这可能是一个错误：酷，我会尽快打开一个问题

将来自 graphql-tools 的函数添加到我们的包中后，我们开始ReferenceError: module is not defined从 graphql-tools 的依赖项中得到一个错误iterall。

我们的 webpack 4 正在将依赖项的 mjs 文件编译为：

已验证将依赖项专门别名为 .js 格式可以修复它，即 iterall：

但这显然不是解决问题的最佳方式

这是我们的 webpack 配置的问题吗？

我刚刚设置了新的 webpack 4 项目，并在我的主 js 文件中导入了 babel-polyfill

import 'babel-polyfill';

在 webpack 生产构建之后，我分析了我的 bandle，source-map-explorer我看到了这样的图片

所以 babel-polyfill (core-js) 占用了150 Kb，这对 IMO 来说太多了。

有什么想法可以减小尺寸吗？我不想包含任何特定的 polyfill（应该有一些摇树，所以应该删除未使用的代码？）。

我使用这个样板：https ://github.com/flexdinesh/react-redux-boilerplate/tree/master/config

webpack-cli 提供了该--plugin选项，但似乎无法解析 ProfilingPlugin。

有没有办法直接通过 cli 选项使用它而不创建 webpack 配置？

node_modules/.bin/webpack --mode=production --progress --profile --plugin ProfilingPlugin 无法解析插件 ProfilingPlugin

https://webpack.js.org/api/cli/#advanced-options

--plugin 加载这个插件

https://webpack.js.org/configuration/plugins/

此表未列出 ProfilingPlugin，但它在内部可用。

我为 Webpack 编写了一个插件，它获取我生成的 React 组件，在 Node 中呈现它，然后将它插入到生成的 HTML 文档中。

这曾经在 Webpack 3 中运行良好。为了将其升级到 Webpack 4，我替换了

和

据我所知，这应该足够了。

在插件中，我向 Webpack 询问我生成的包的路径，然后询问require，大致如下：

但是，由于以下原因，我突然遇到如下错误require：

有问题的代码似乎是一些标准的 Webpack 头等大事：

（请注意，此示例取决于所谓的违规列。如您所见，window实际上并未在第 286 列中提及。）

我对 Webpack 不太熟悉，关于插件的文档相对稀缺，因此非常欢迎任何有关如何更接近解决此问题的指示/

我将 sass 文件（app.scss）作为导入引用（将其包含在 styleUrls 数组中时出现错误）

将 webpack 与我当前的配置（包括使用 ExtractTextPlugin）一起使用，我生成的 app.css.map 文件基本上是空的。看起来像：

我需要更改什么才能正确生成源映射文件？我的 webpack.config.js 文件如下所示：