问题标签 [webpack]

我维护了一个greasemonkey 脚本，用于监控当前曲目的播放以及Soundcloud 上的进度。以前，我可以require("lib/audiomanager")访问一个对象，该对象允许我查看整个页面的状态，例如播放曲目信息。

问题是，Soundcloud 已经开始使用 webpack 作为客户端 Javascript。据我了解，这会将所有这些类作为特定数字存储在一个包中。每次更新和重新编译客户端 JS 时，它们存储的数字似乎都会发生变化。

访问存储在 webpack 中的对象的唯一方法似乎是通过全局 webpackJsonp，如下所示。包的编号只需要唯一。

该代码将执行并允许我访问 webpack 中该编号的对象。客户端 webpack 的 JS 中定义的对象是：

所以，我能想到的解决方案：

• 找到一个 webpack 编号不变的对象，我可以用它来获取该对象的句柄
• 迭代每个 webpack 编号并寻找一个与这个具有相同方法集的对象。

后者看起来很乱，而第一个似乎不可能。有任何想法吗？

我尝试过的事情：

• 制作一个新的 n(53) 就像所需的对象一样，因为它似乎在更新时保持不变。给我一个音频管理器，但绝对与页面的普通音频管理器分开，所以我看不到正在播放什么。

在这里拉我的头发寻找一个简单的解决方案来共享代码，通过 NPM 需要，跨多个 Browserify 或 Webpack 包。想一想，有没有文件“桥”之类的东西？

这不是由于编译时间（我知道 watchify），而是希望将我所有的供应商特定库提取到其中vendor.js以保持我的app.js文件大小并且不会因大量源映射而使浏览器崩溃。另外，如果需要查看已编译的 js，我发现它会更干净。所以：

从 NPM 加载代码而不是从 Bower 加载代码非常重要，或者保存到某个“供应商”目录中，以便通过相对路径导入并通过 shim 识别。我想保留通过 NPM 提取的所有库引用，除了我的实际应用程序源。

在app.js我保留所有源代码中，并通过externals数组从编译中排除上面列出的供应商库：

然后在index.html，我需要这两个文件

使用 Browserify 或 Webpack，我怎样才能使它app.js可以“看到”通过 npm 加载的那些模块？我知道创建一个带有外部的捆绑包，然后node_modules通过别名引用直接文件（例如，在 中），但我希望找到一个更自动且更少“Require.js”之类的解决方案。

基本上，我想知道是否可以将两者连接起来，以便app.js可以查看内部vendor.js以解决依赖关系。这似乎是一个简单直接的操作，但我似乎无法在这个广阔的网络上的任何地方找到答案。

谢谢！

通常在开发者模式下，Webpack 使用 HTTP 运行。通常有一个 Web 服务器通过 HTTP 和 webpack 在单独的端口上使用 http/websockets 提供内容。

是否可以在 https/websocket 安全上运行 https 和 webpack 上的 web 服务器？

我很难尝试将 jQuery-Datatables 作为来自 bower 的 webpack 模块包含在内，当前设置与其他 bower 组件一起使用，这里是 webpack 配置文件的一部分：

我尝试运行webpack --watch并在编辑我的 JS 文件后，它不会触发自动重新编译。

我尝试webpack使用重新安装，npm uninstall但它仍然无法正常工作。

有任何想法吗？

我正在尝试在我的 webpacked 应用程序中require使用bootstrap-webpack模块。

它似乎需要 jQuery，因为捆绑的 javascript 然后抛出以下内容：

未捕获的 ReferenceError：未定义 jQuery

如何向 webpack 指定 jQuery 是 bootstrap-webpack 模块的依赖项，以解决此问题？感觉它应该是微不足道的，但我一直在努力弄清楚。

我试过添加：

到 bootstrap-webpack's 中的依赖项package.json，但这不起作用。文档不完整，我似乎找不到太多关于这个问题的信息。这应该是微不足道的，对吧？帮助！

如何使用 webpack-dev-server实现“代理”（类似于grunt-connect-proxy ）选项？

我正在将webpack和webpack-dev-server与 Grunt 一起使用。Gruntfile.js（下面的代码）中的任务能够在端口 8080 上启动服务器。我想为所有后端数据请求（上下文 URL /ajax/*）添加代理设置。

Scenario 是一个基于业务组件的 Web 开发团队。组件由不同的团队成员开发，他们对组件系统应该如何工作有着共同的理解。

一种解决方案是让容器负责网格、核心 ui 样式，也许还有其他一些 js 组件，如引导程序。那么问题是，如果我们依赖这样的运行时。模块不会像预期的那样孤立。

另一个想法是在整个应用程序构建时使用 webpack 作为构建工具。然后我们能够依靠构建时间来避免重复的资源。这将是一个合理的解决方案，只是我们可能必须为每个组件导入多个模块。

还有什么想法吗？

我在我的服务器中使用 webpack-dev-middleware 来编译 javascript，如下所示：

在开发中一切正常，我可以在我的视图中包含捆绑包。但是在生产中我不能包含它们，因为它们没有构建到“dist”中。此文件夹始终为空。我做错了什么？有人有想法吗？

最好的问候

我在使用 webpack 而不是Codekit v1.9.3时遇到问题。我开始从 CodeKit 迁移到 Grunt 和 Gulp，然后了解了webpack哪些听起来很酷。我似乎无法让它正常工作。

“喜欢 Codekit”意味着我可以：

• javascript用coffeescript语法写
• 将所有脚本源文件和库缩小/丑化并合并到一个文件中
• 根据需要选择性地包含bootstrap-sass（scss）框架的组件
• 通过 sass 变量维护一个带有引导程序自定义的小文件，例如$brand-primary
• 用于webpack --watch在更改脚本和样式时自动编译它们
• 最终得到一个 css 文件和一个脚本文件，它们可以包含在样式表和脚本标记中。

Codekit 项目设置

鲍尔资源：

我目前在项目之外在全球范围内存储这些：

因为 CodeKit 支持指南针，所以我的config.rb文件中有这个：

项目结构

styles.scss 的内容

系统设置：

• 系统：OS X 10.9
• 节点 - v0.10.32
• npm - v2.1.7
• zsh - zsh 5.0.7 (x86_64-apple-darwin13.4.0)

节点安装了自制软件brew install node，否则似乎工作正常。

我试过的

我已经阅读了这些页面：

• http://webpack.github.io/docs/configuration.html
• https://github.com/petehunt/webpack-howto
• http://webpack.github.io/docs/tutorials/getting-started/
• https://www.npmjs.org/package/bootstrap-sass-webpack

我曾webpack.config.js多次尝试创建文件，最近的尝试是以下几个版本：

Webpack 错误

当我跑步时，webpack我得到了这个：

NPM 错误

我在尝试时遇到错误npm install bootstrap-sass，并且在寻找解决方案时没有任何运气。我什至不确定我是否需要这个模块。

混乱的来源

对我来说，webpack 最令人困惑的部分是：

1. 应该在哪里添加类似的东西require("bootstrap-sass-webpack")- 是在webpack.config.js文件中还是在js/main.js文件中？
2. 像这样的模块应该在安装后立即用于 webpacknpm install吗？
3. 我认为我应该这样做npm install webpack -g，以便全局安装 webpack，并在npm install没有-g其他模块的情况下使用。但是，我没有看到node_modules在我的项目中创建任何文件夹。不应该有一个吗？
4. 搜索路径是如何确定/指定的require("bootstrap-sass-webpack")？

我应该安装哪些节点模块才能做到这一点？我应该是什么webpack.config.js样子？