问题标签 [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 投票
1 回答
948 浏览

less - 如何使用 webpack less 加载器获取源映射?

使用带有 webpack 的 less 加载器时是否可以获取源映射?

0 投票
2 回答
57975 浏览

javascript - Webpack 中的热模块替换到底是什么?

我已经阅读了 关于 Webpack 中的热模块替换的内容。
甚至还有一个使用它的示例应用程序。

我已经阅读了所有这些,但仍然不明白。

我能用它做什么?

  1. 它应该只用于开发而不是生产吗?
  2. 是不是像 LiveReload 一样,但必须自己管理?
  3. WebpackDevServer 是否以某种方式与 LiveReload 集成?

假设我想在将 CSS(一个样式表)和 JS 模块保存到磁盘时更新它们,而不需要重新加载页面并且不使用 LiveReload 等插件。这是热模块更换可以帮助我吗?我需要做什么样的工作,HMR 已经提供了什么?

0 投票
9 回答
59750 浏览

webpack - 如何使用 webpack 注入内部版本号?

我想将构建号和版本信息注入到我的项目中,因为它是使用 webpack 构建的。例如,以便我的代码可以执行以下操作:

build-info在构建时生成该模块的最佳方法是什么?

0 投票
1 回答
2558 浏览

javascript - Webpack 多个命名块在运行时忽略名称

我在使用 webpacks 代码拆分功能时遇到问题。我试图在我的应用程序中为两条不经常访问的路由设置 2 个命名块。mysite.com/settings 和 mysite.com/access。

这是我的 webpack.config.coffee

这是我的 router.coffee

我没有使用 webpack 开发服务器,而是使用以下 cmd-line 工具来观看

问题是它在需要文件时忽略了名称,因为您可以看到格式是“[name]-[hash].js”它生成格式正确的文件,例如 settings-2j3nekj2n3ejkn2.js 但是在开发过程中,当我尝试加载页面,浏览器抱怨找不到“-2j3nekj2n3ejkn2.js”,不知何故,文件的映射忽略了名称。如果我省略了名称,那么它可以工作。

所以问题是如何正确设置多个命名块。提前致谢。

注意我已经在https://github.com/webpack/docs/wiki/code-splitting的文档中查看了他们的示例

我也在 https://github.com/webpack/docs/wiki/optimization关注了他们的优化文档

但我被困住了

0 投票
1 回答
2331 浏览

javascript - webpack 源映射是匿名的

我正在尝试使用webpackdevtool的功能,我已经像这样设置了我的配置:

这似乎工作正常,我可以看到我的源代码被包装在eval()函数中,并且在末尾附加了一个 base64 源映射。

但是,我的错误没有映射到源(Chrome 开发人员工具),而是收到如下错误:

abc.js我的构建和连接文件的名称在哪里。单击错误以查看源代码只会将我带到如下eval功能:

如果我解码 base64,我可以看到它生成的源映射似乎是有效的:

有谁知道为什么这些源地图似乎不起作用?webpack 文档在某些方面仍然有些模棱两可。

请不要我只eval-source-map在开发中使用,并为生产生成一个单独的地图文件(这也不起作用)。

0 投票
1 回答
197 浏览

gulp - 如何在 famo.us 中使用 gulp-webpack

如何在 famo.us 中使用 webpack

我找到了一个种子https://github.com/Vertice/ Famous-webpack-seed并且之前已经看到它与 grunt 一起使用。我想知道是否有人可以帮助我用 Gulp 实现它。我似乎无法弄清楚如何让 gulp-webpack 找到和使用著名的模块。通过预编译的 require 版本或 npm 未压缩版本。

0 投票
1 回答
8705 浏览

reactjs - 带有 React 未捕获引用错误的 WebPack

我非常松散地遵循这里的示例,直到它开始运行开发服务器。

我有一个测试 React 组件(在 scripts/test.jsx 中):

我有一个 webpack.config,我在其中对源目录使用 jsx 加载程序(它与示例中的基本相同,除了我添加了库属性)。

我运行 webpack 并像我期望的那样生成捆绑文件,但是,当我尝试在 html 文件中使用组件时(在包含 bundle.js 脚本参考之后),我在控制台中得到以下信息:“未捕获的 ReferenceError:测试不是定义“。

HTML 包含以下内容:

我是否在使用 CommonJS 样式中定义的组件对技术上不使用模块加载器的 html 页面做一些不正确的事情(我试图将此测试视为试图加载组件而没有任何结构化模块加载器的类型)?

webpack 的输出可在此处获得

编辑 2:完整的示例代码可作为 github repo获得

0 投票
1 回答
269 浏览

javascript - 定义我自己的 React 事件类型

我正在将 React 用于移动 Web 项目。为了提供更好的交互性,我修改TapEventPlugin了 的不同实现touchTap,并定义了一个模拟悬停在元素上的新事件。

为了将它与 React 集成,我已经分叉了项目并添加TapEventPluginReactInjection.EventPluginHub.injectEventPluginsByNameReactDefaultInjection.js 中的调用中。如果我想要一个带有我的更改的 React 版本,这很好grunt build用,但是我现在想将 React 与我的应用程序捆绑到一个 JS 文件中,我遇到了一些麻烦。

理想情况下,我想停止分叉并使用 vanilla npm React 以某种方式从我的应用程序中挂钩我的新事件。这可能吗?

或者,我可以在我的 package.json 中将我的 React fork 的 URL 指定为依赖项,但 React 项目根目录中的 package.json 是用于 react-tools,而不是 React。是否有某种方法可以触发 grunt 构建并将 build/npm-react 文件夹作为依赖项作为npm install过程的一部分?

0 投票
1 回答
930 浏览

javascript - 使用 AMD 和 webpack 在浏览器中拉入 sinon 子模块

我遇到了这个问题中描述的相同问题。基本上,如果您使用 node,sinon 只会拉入所有必需的子模块。如果您尝试在带有 AMD 的浏览器中使用它(我正在使用 webpack),显然您必须手动包含lib/spy.js.

我有一个当前导出 sinon 的 webpack 模块:

我将如何修改它以滚动spy.js

我认为这更像是一个 CommonJS 语法问题。

0 投票
1 回答
556 浏览

javascript - Webpack 在运行时随机加载模块

我有许多模块我想在运行时有条件地加载/不加载。但是,我不知道捆绑时模块的名称。我的代码是这样的:

然后我有一堆模块使用上面的模块,如下所示:

但我在浏览器中收到“require.ensure is undefined”错误。我究竟做错了什么?我错过了什么吗?