问题标签 [webpack]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
5 回答
14676 浏览

javascript - 赋值左侧的 Javascript 对象括号表示法 ({ Navigation } =)

我以前没有见过这种语法,我想知道它是怎么回事。

左边的括号抛出语法错误:

意外的标记 {

我不确定 webpack 配置的哪一部分正在转换或语法的目的是什么。是和谐的东西吗?有人可以启发我吗?

0 投票
1 回答
1744 浏览

javascript - Webpack 包验证但节点服务器抛出语法错误

我正在使用 webpack 来捆绑/转换 jsx。

从命令行我正在运行“webpack --watch”。这将创建我的包而没有错误。这是我的 webpack 配置和 Application.js



然后我正在运行引发错误的节点服务器。

结果是:

我应该如何运行我的项目以允许我在我的 .js 文件中包含 jsx/harmony?



更新:解决方案

正如 Brandon 所指出的,我需要在 Node.js 中使用 node-jsx 进行转换。在我添加的 server.js 文件的顶部,一切正常:

0 投票
2 回答
2656 浏览

javascript - Webpack 在包输出中导致语法错误

我一直在努力解决一个我认为是由Webpack引起的问题。

本质上,我有一个基于 Node 的应用程序,我将它与 Webpack 捆绑在一起以提供给客户端(它是一个基于 ReactJS 的应用程序)。当我安装Tabletop NPM 包并required 时出现问题。

尝试bundle.js在浏览器中加载 Webpack-created 时,出现语法错误:

Uncaught SyntaxError: Unexpected identifier

这是在抱怨这一行bundle.js

target[capName] = __webpack_require__(387)(""path + '/' + name);

经过一番挖掘,我发现这行来自Hoek库中的一行(它是 Tabletop 的子依赖项):

target[capName] = require(path + '/' + name);

显然,Webpack 在这里做了一些时髦的事情。

虽然我无法找出原因。Tabletop 包含一个NodeJS 使用示例,我能够将其 Webpack 并运行得很好。

我还克隆了 Hoek 和 Webpacke,没有看到任何像上面这样的非法转换。

所以现在,我不确定这是 Webpack、Hoek 还是 Tabletop 问题,这就是我在这里发布它的原因。

我在这里或在 GH 上没有发现相关问题。

所有帮助表示赞赏!

0 投票
1 回答
359 浏览

javascript - 我可以在现有的 javascript 应用程序中使用节点模块吗?

我的目标是弄清楚如何在现有的 javascript 应用程序中使用节点模块

我现有的应用程序是基于 jQuery 和 ReactJS 的。

我遇到了一些我想开始在项目中使用的节点模块,它们似乎只能作为模块使用(因此不能通过简单地添加script标签来使用它们)。

以前我一直在使用bower安装库并在本地使用它们,只需使用script标签即可。

我知道我可以使用BrowserifyWebpack将一堆 Node 模块捆绑到一个 javascript 文件中,但是如何将其中的模块公开给我现有的应用程序?

我想做的是

wheremyapp.js可以使用全局变量来表示module_x哪个是 npm 模块。

我预见的问题之一是说bundle.js可能已经包含 jquery,那么我该如何解决这个问题呢?我知道有些人可能会说“将您的整个项目转换为模块”,然后它就可以工作了!但我想知道是否可以不这样做,尽管有所有好处;-)

0 投票
3 回答
3350 浏览

heroku - 如何在 Heroku 上构建 webpack?

部署到 Heroku 后触发 Webpack 构建的最佳方式是什么?

在不是最漂亮的解决方案中推送已经捆绑的版本。

0 投票
2 回答
1046 浏览

svg - webpack css-loader 忽略 & svg 定义 url

我在带有 css-loader 的项目中使用 WebPack。

此项目中的 SVG 元素具有标记定义,这些标记在样式表中分配如下:

标记定义:

标记用途:

我在样式中使用标记是因为我不想弄乱我正在使用的图表库,但 css 加载器会在 URL 上中断。

有没有办法忽略这些规则中的某些 URL 值或其他方法来防止加载程序失败?

0 投票
2 回答
3641 浏览

node.js - 如何不捆绑 node_modules,而是在 node.js 中正常使用它们?

建筑学

我想在客户端和服务器端之间共享代码。我在 webpack 配置中定义了别名:

问题

现在在服务器端,我需要包含 webpack 以便在需要文件时识别正确的路径。例如

在纯 node.js 中将失败,因为找不到 app 文件夹。

我需要什么(阅读我需要什么更新部分)

我需要能够使用 webpack 别名。我正在考虑制作一个没有来自 node_modules 的任何文件的所有服务器部分的捆绑包。这样,当服务器启动时,它将使用 node_modules 文件夹中的 node_modules 而不是缩小的 js 文件(为什么?第一个:它不起作用。第二个:不好,因为 node_modules 是基于平台编译的。所以我不希望我的 win 文件在 unix 服务器上运行)。

输出:

  • server.js不包含任何 node_modules 的编译文件。
  • server.js使用node_modules;

我需要更新的内容

正如我在https://github.com/webpack/webpack/issues/135中注意到的那样,制作捆绑的 server.js 会弄乱所有 io 操作文件路径。

一个更好的主意是保留 node.js 服务器文件原样,但用require自定义 webpack 替换提供的方法,该 webpackrequire考虑了别名(其他?)等帐户配置......可以按照 require.js 的方式完成在 node.js 服务器上运行。

我试过的

通过在 webpack 中添加这个插件

参赛作品:

它将创建一个仅包含我的服务器代码的文件 server.js。然后创建一个未使用的 server.bundle.js。但问题是 webpack在文件中包含了该webpackJsonp函数。server.bundle.js因此客户端和服务器都无法工作。

这应该是一种仅在一个条目上禁用 node_modules 的方法。

我试过的#2

我已经设法排除了路径,但是因为已经缩小,所以 requires 不起作用。所以源看起来像require(3)而不是require('my-module'). 每个 require 字符串都已转换为整数,因此它不起作用。

为了工作,我还需要修补 webpack 导出的 require 函数以添加 node.js 原生 require 函数(这很容易手动完成,但应该自动完成)。

我试过的#3

在 webpack 配置中:

这只会添加一个exports变量(不确定它还有什么作用,因为我已经区分了输出)。

我尝试过的#4(几乎在那里)

使用

然后用r(2).ensurerequire替换所有出现的。我不知道r(2)零件是否总是相同的,因此可能不会自动化。

解决了

感谢ColCh告诉我如何在这里做。

通过更改 node.js 中的require方法,它将使 node.js 通过 webpackrequire功能传递所有要求,这允许我们使用别名和其他礼物!谢谢科尔奇!

有关的

谢谢

0 投票
1 回答
647 浏览

css - 使用 WebPack 在 LESS 文件中引用外部资源

我需要@import一个来自 LESS 的外部管理 URL,并且正在使用 WebPack,但我无法弄清楚如何去做。

具体来说,我需要@import一些来自 myfonts.net 的 URL 才能使用它们的许可。

我基本上是在做以下事情: @import url("//myfonts.net");

但是 WebPack 正在本地查找文件,而不是导入 URL。

我认为问题在于css-loader尝试在本地解析文件,但我不确定如何指示css-loader根本不解析 URL。

0 投票
0 回答
832 浏览

javascript - Webpack:无法要求使用变量自动解析依赖项

在开发使用 Webpack 管理 JavaScript 依赖项的 Web 应用程序时,我偶然发现了我将要描述的问题。

加载传递字符串的依赖项require()可以很好地工作:

在这里,jquery安装了 Bower,并且正确配置了 Webpack 以自动解析 Bower 模块。

现在,我正在研究有条件地加载模块的问题,特别是关于必须从 CDN 下载模块的情况,或者如果 CDN 失败则从本地服务器下载模块的情况。顺便说一下,我scriptjs习惯从 CDN 异步加载。我正在编写的代码是这样的:

这段代码也很漂亮。

现在,由于我显然有很多依赖项(Handlebars、Ember 等)我想首先尝试从 CDN 加载,所以这段代码开始变得有点多余,所以我尝试做的最合乎逻辑的事情是将其重构为一个函数:

问题是 Webpack在处理语句中的表达式时有一种特殊的 行为require,这阻碍了我以上述方式加载模块的尝试。特别是,当在其中使用表达式require

尝试包含您的表达式可能的所有文件

当我尝试使用上面的代码运行 Webpack 时,最终结果是一堆错误消息。

虽然链接的资源建议明确声明要包含的 JavaScript 文件的路径,但我没有得到的是当我不能或不想传递精确路径时如何做同样的事情require,而是使用自动解析模块,如图所示。

谢谢大家

编辑:

我仍然不知道如何使用表达式来加载这些脚本,但是,我设计了一个解决方法。基本上,这个想法是在require('script')内部显式地编写一个回调函数,然后在适当的时候动态地调用该函数。更准确地说,我准备了一个这样的配置文件:

然后,在我的主代码中,我定义了一个要加载的资源数组,例如:

然后当我必须加载开发版本或分发版本时,我通常会调用:

这里有一个更完整的例子。

0 投票
2 回答
9988 浏览

commonjs - 如何通过 Webpack 和 6to5 使用带有 es6 模块的 npm 包?

假设我想在我的项目(或任何给定的 npm 包)中使用 Immutable。我已经npm install编辑了它,所以它在node_modules. 当然,那里有 CommonJS 导出。但是,我想在我的项目中使用 es6 模块。

我正在使用 Webpack 将它们一起编译,并使用 6to5-loader 来处理 es6 模块语法。

在我的源文件中,我说import Immutable from 'immutable';--- 但这会导致问题,因为 es6import正在寻找default已导出的 es6,但事实并非如此(对于 Immutable 或几乎任何其他 npm 包)。编译后的代码最终看起来像这样:var Immutable = require('immutable')["default"];--- 这当然会引发错误,因为没有default要查找的属性。

我可以使用带有 es6 模块的 npm 包吗?