问题标签 [webpack]

我很难找到足够的 Webpack 文档和示例来为我的情况制定理想的开发工作流程。以下是使工作流程理想化的所有功能：

1. 观看，理想情况下通过 Gulp，高效缓存。（不要认为我需要热模块更换并怀疑它可能不适合我的开发环境。）

2. 供应商模块（现在我只有 npm 包，如果归根结底，并不是所有的都在其主文件中公开 UMD 全局变量）是

   一个。在监视期间未解析和重新编译（因此重新编译更快），

   湾。不接收源映射（因此浏览器开发工具响应速度更快），并且

   C。写入一个不同的vendor.js包，浏览器可以与应用包分开缓存。

3. 应用程序模块

   一个。明确所有依赖项（即import React from 'react';，即使 React 实际上是全局公开的或通过#2 的东西），

   湾。在监视期间重新编译，并且

   C。确实收到一个源图。

我在文档或示例中阅读的大部分内容似乎并没有直接触及这个工作流程。

虽然我确实在文档中看到了如何创建特定于供应商的捆绑包（在此处转载：Simple solution to share modules loaded via NPM across multiple Browserify or Webpack bundles），但提供的简单示例并未涉及 2a 和 2b。

我在文档中没有看到任何方法可以为不同的块指定不同的编译配置（源映射等），或者使用可以相互引用的单独配置文件创建完全独立的 Webpack 包，除非通过全球化所有供应商库和将它们用作外部（？），这并不理想......

另外，我很好奇 Gulp 用户是使用gulp-webpack还是使用类似http://webpack.github.io/docs/usage-with-gulp.html中提供的设置。（我不确定它webpack-dev-server是否适合我的开发环境，所以如果可能的话，我想坚持下去gulp-watch。）

我错过了其他 Webpack 用户知道的东西吗？最好的方法是什么？

或者Webpack 是否可能不是适合这项工作的工具？

我正在为我的应用程序使用 WebPack + React + Jest，并且我已经resolve.alias = { app: "/path/to/app" }在我的配置文件中进行了设置。

在 React 中，我可以使用此路径来执行 require("app/component") 并正确获取“/path/to/app/component.js”处的文件。

在运行 JEST 测试时，无论在测试中还是在导入的模块中，都无法识别此别名。所有这些都在运行应用程序时有效，但在使用 jest-cli 的测试时无效。

我正在使用一个简单的节点快速服务器，它包含在 Webpack 开发服务器（http://webpack.github.io/docs/webpack-dev-server.html）中

我正在从顶级目录启动一个快速应用程序，其中静态文件位于名为“public”的目录中。

我有这行配置：

如果我输入http://0.0.0.0:3000/index.html，一切都很好。

http://0.0.0.0:3000/但是如何生成顶级目录列表的URL 。

http://0.0.0.0:3000/配置到 index.html 文件的正确方法是什么？

我是 webpack 的新手，我正在转换现有的 web 应用程序以使用它。

我正在使用 webpack 来捆绑和缩小我的 JS，这在部署时非常棒，但是这使得在开发时调试非常具有挑战性。

通常我使用 chrome 的内置调试器来调试 JS 问题。（或firefox上的Firebug）。然而，使用 webpack，所有内容都被塞进一个文件中，使用该机制进行调试变得具有挑战性。

有没有办法快速打开和关闭捆绑？或打开和关闭缩小？

我查看了是否有一些脚本加载器配置或其他设置，但它看起来并不奇怪。

我还没有时间把所有东西都转换成一个模块并使用需求。所以我只是使用 require("script!./file.js") 模式来加载。

我正在尝试从 移动Gulp到Webpack. 在Gulp我的任务中，将所有文件和文件夹从/static/文件夹复制到/build/文件夹。如何做同样的事情Webpack？我需要一些插件吗？

我正在尝试将web api 与捆绑在一起Spotify的简单应用程序一起使用。 reactwebpack

首先是直接来自 Spotify 的演示应用程序。这很简单。它使用如下链接调用express服务器：

然后redirect在快速服务器中运行它。

它调用另一个端点，redirect_url. 这一切都很好。

这是当我bundle使用webpack然后/login从我的store.

我的链接是一样的，但它现在调用一个点击函数，它在我的store：

这称为login端点。然后调用时redirect，我得到一个cors错误。

No 'Access-Control-Allow-Origin' header is present on the requested resource.

enpointexpress是完全相同的代码。我从字面上复制并粘贴到我的商店。为什么我现在会收到此错误，但使用 vanilla js 时却没有？为什么我的重定向不起作用？我以为我明白了cors。

如果我有一个包含内容的 javascript 文件：

是否有可能以某种方式从变量中捕获该文件的返回值？我假设该函数返回到自动实例化括号，然后进行垃圾收集，但我不确定。

顺便说一句，我正在尝试将浏览器化的节点模块集合公开到窗口以进行测试（我意识到可能还有其他方法可以解决这个问题，但我对这个很好奇）。

我一直在使用带有它和标志的webpack-dev-server 。这一切都很好。--inline--host

webpack-dev-server --inline --host example.com

然后我研究了使用gulp和 webpack-dev-server API来完成这个任务。

这似乎不起作用，我相信没有inline或host用于API。

知道这是否可能吗？

我的 JS 模块有一个文件夹结构。我想要每页一个模块。这不是一个单页应用程序。

如何以文件夹结构输出文件？

据我所知，唯一的可能性是输出[name].js. 如果我使名称非常独特，或者我可以使名称具有-文件夹分隔符，这可能会起作用。那将意味着a/b/c.js将翻译为 name a-b-c。我真的不喜欢这个。我希望能够require("a/b/c")。

据我所知，我也不能使用单个捆绑文件，因为require在模块之外不可用。require("a/b/c")如果是这样，我可以只在每个页面上构建一个捆绑包。

如果有一种我在互联网上找不到的好方法，请告诉我。

看起来我可以使用 r.js 使用 require.js 轻松完成此操作，但我不想使用 require.js 并且想要 CommonJS 模块。

我正在为我的组件使用 React，并且为了将样式与我的组件打包在一起，我需要按照记录的 webpack 方法将它们放入： require('./style.css'); 但是当我尝试在服务器上渲染时，node-jsx 会抛出一个错误当它尝试转换 css 时。是否有另一种方法可以转换不会在 css 上中断的 jsx？我宁愿不将样式分解到自己的管道中，因为这会很好地破坏 webpack 打包组件的优势。