问题标签 [webpack]

好吧，这很奇怪。我已将 Google 标签管理器脚本添加到页面底部并发布了容器，但已删除所有标签（以防万一标签之一是罪魁祸首）。我的代码片段如下所示：

似乎正在发生的事情是标签助手代码中的某些内容挂起并导致页面在几秒钟内无响应。

您可以在此屏幕截图中看到它看起来onreadystatechange花费了将近 3200 毫秒。

对于更多上下文，我正在使用 node/react/webpack 进行服务器端渲染。这是我在服务器上呈现的页面模板：

这是我第一次尝试使用谷歌标签管理器，所以我不确定我的配置是否有问题。感谢帮助。

更新

我有一个常见的 webpack 包，称为common.js. 根据网络选项卡，谷歌标签管理器脚本似乎强制它被第二次下载。真的很奇怪。

我是 webpack 的新手，想将它与 reactjs 一起使用，但现在有点迷茫。我想知道如何在客户端站点开发过程中使用 webpack 处理 css。我知道 webpack 捆绑了我所有的 js 并将其链接为 bundle.js，我在我的 html 文件中引用它，如下所示：<script src="http://localhost:3000/assets/bundle.js"></script>基于我的 webpack-dev-server 配置。现在，我也有一个 css 文件。这要去哪里？在我的 html 文件中引用它的 url 是什么。我知道有一个样式加载器和一个 css-loader 以及一个 ExtractTextPlugin，但是输出属于哪里？我看到我可以var css = require('path/customStyle.css')但似乎没有看到它出现在哪里？我在我的 index.jsx 文件中执行此操作。所以他的问题是：如何把它放在一起，我可以参考我的 customStyle.css。我做错了什么，或者我错过了什么这是我的项目文件夹结构：

我的 webpack.config.js 看起来像这样

Html 文件如下所示：

任何有关 webpack 方式如何工作以及如何让我的样式进入的背景的帮助都会很棒。

我和我的团队目前正在将一个相当大的项目从 AMD + RequireJS 迁移到 CommonJS + Webpack。我们喜欢 Webpack 提供的工具，并认为 CommonJS 是社区前进的方向：随波逐流。

什么是利用 webpack 自动加载和捆绑我们的 .mustache 模板文件的有效方法？目前我们有一个监视脚本，它使用xport将项目文件夹中的所有 .mustache 文件捆绑到一个 js 文件中，格式如下：

我们完全可以继续使用它...... 我们当前的解决方案特别方便的是，当我们制作新模板时，我们不必在项目中专门引用我们的模板。因为脚本只是在监视文件夹，所以字典会更新，我们可以使用另一个库来获取字符串并将其变成可用的模板函数。

那目标是什么？ 我很好奇是否有一种方法可以从我们文件夹中的模板 -> 我们可以在代码中使用的函数，而不必特别要求将文件放入项目中。而且我们当前的解决方案超出了 webpack（当然，除非有办法挂钩），这很烦人，因为我们不想要 2 个监视脚本。我研究了加载器，但这些似乎是 1 对 1 源文件 -> 输出文件 vs 多对 1，这是我们当前解决方案的优点。

谢谢！

我试图在我的 sass 文件中指定一个字体系列变量，这让我很伤心。这是 sass 的定义：

奇怪的是，如果我从中删除引号Lato，Helvetica Neue它编译得很好。如果我没有收到此错误消息：

更新

更奇怪的是，即使产生了错误，文件实际上已经编译，并且css在那里。

我有 reactJS-webpack-grunt 应用程序。

我想将我的应用上传到不同的环境，每个环境都有自己的设置。目前我有一个settings.js文件，当 webpack 做它的事情（grunt build 或 serve）时，设置隐藏在assets/main.js.

目前，在每个使用我已经完成的设置的文件中：var settings = require('settings');并且webpack.config.js我已经声明了一个别名

我的目的是拥有一个不同的settings文件，具有类似 JSON 的结构，任何非技术人员都可以轻松更改，并且多次上传我的应用程序，每次编译相同的代码，都settings.js保持不变。

这样做很好：

但是，将其移动到另一个文件并使用 CommonJS/webpack 将其导出会导致：

（像这样：）

...

这可能非常明显，但在我看来，我不明白为什么这不起作用：/

我不知道我的两个问题是否相关，但我认为可能有机会，所以就这样吧。

我正在玩 React（使用 webpack / commonjs）并且我已经取得了基本的成功。组件在页面上成功呈现。

不幸的是，没有任何事件在起作用（甚至测试简单的点击处理程序），而且我的 React 开发工具根本不加载我的层次结构，只是显示<Top Level></Top Level>. 我试过expose-loader（用于处理开发工具问题）无济于事。

任何想法都非常感谢！

编辑：可能值得一提的是，我知道我的事件处理程序正在加载（如果我作为处理程序传递对记录到控制台的函数的引用，例如，出现消息）。事件本身根本不会触发/被定向到处理程序。

编辑2：另外值得注意的是（基于此问题的普遍建议解决方案）我也尝试将React暴露在开发工具的窗口中，如果我去像React主页这样的地方，我的反应开发工具工作得很好.

我正在使用 PapaParse 从文件输入中加载 csv 文件。

目前，我有一个工作版本，我使用脚本标签加载 PapaParse：

并处理更改事件：

我现在想使用 webpack 来捆绑我的 js，并且我想在需要时动态加载 PapaParse，而不是每次都加载到全局命名空间中。像这样的东西：

不幸的是，这给了我PapaParse 库中Uncaught ReferenceError: Papa is not defined这一行的错误：

有什么办法可以使这项工作？

[编辑]

我对 requirejs / webpack 完全陌生，所以我不确定这是否是解决此问题的正确方法，但我设法通过使用以下shim 配置使其正常工作（不幸的是仍然污染了窗口命名空间） ：

据我了解，第一个指令 ( imports?this=>window) 使用导入加载器将global参数设置为窗口对象（而不是空对象）。这使得 PapaParse 中的调用可以正常工作（global.document并且global.postMessage()似乎也可以使不合格的调用Papa正常工作 - 即那些没有前缀为 的调用global.Papa）。第二个指令 ( exports?global.Papa) 表示将 Papa 对象导出为 require 调用的返回对象。

如果有 webpack 经验的人可以建议这是否是处理这个问题的正确方法，我会很感兴趣？

我正在开发一个同构的 React+Flux+express 应用程序，并为我的 sass（使用 sass-loader）和 jsx 文件使用 webpack 加载器。我不确定如何将样式表注入服务器端模板。为此，我查看了提取文本插件，但我真的希望能够使用热模块替换。现在，我正在将我的main.scss文件加载到这样的 React 组件中：

这适用于在组件中加载单个样式表，但在安装 React 部分之前会出现闪烁。我知道这是因为这是在我的客户端应用程序加载后注入样式表，因此样式表不会立即可用。这导致了一个实际的问题：有没有办法在仍然使用 webpack 加载器的同时将此样式表注入到我的服务器端模板中，或者这是否需要单独的 gulpfile 或 express 中间件？我以前使用 gulpfile 来构建我的样式表，但我最终会拥有很多样式表，并且不希望它们都卡在一个文件中。

我有一些要开发的东西——例如我不想让我的分布式构建文件膨胀的模拟。

在 RequireJS 中，您可以在插件文件中传递一个配置，并在此基础上要求一些东西。

对于 webpack，似乎没有办法做到这一点。首先，为环境创建运行时配置，我使用resolve.alias根据环境重新指向要求，例如：

然后在创建 webpack 配置时，我可以动态分配哪个文件envsettings指向（即webpackConfig.resolve.alias.envsettings = './' + env）。

但是我想做类似的事情：

但显然，如果环境不是模拟的，我不想构建那些模拟文件。

我可以再次使用 resolve.alias 手动将所有这些要求重新指向存根文件 - 但有没有一种方法感觉不那么老套？

任何想法我该怎么做？谢谢。