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

javascript - 如何防止 moment.js 使用 webpack 加载语言环境?

moment.js当您使用 webpack 时,有什么方法可以停止加载所有语言环境(我只需要英语)?我正在查看源代码,似乎如果hasModule已定义,它是为 webpack 定义的,那么它总是会尝试require()每个语言环境。我很确定这需要一个拉取请求来修复。但是有什么办法可以通过 webpack 配置解决这个问题吗?

这是我加载momentjs的webpack配置:

然后在任何我需要它的地方,我就去做require('moment')。这可行,但它在我的包中添加了大约 250 kB 的不需要的语言文件。另外我正在使用momentjs和gulp的凉亭版本。

此外,如果 webpack 配置无法解决此问题,这里是指向加载 locales 的函数的链接。我尝试添加&& module.exports.loadLocalesif声明中,但我猜 webpack 实际上并不能以这种方式工作。require不管怎样。我认为它现在使用正则表达式,所以我真的不知道您将如何修复它。

0 投票
1 回答
9167 浏览

javascript - webpack 样式加载器是否意味着加载所有 css?或者只是应用程序特定的css?

我正在尝试使我的前端设计过程更加模块化,并且正在探索webpack。它支持样式加载器,它允许您导入 css 文件并将其注入到文档中,如下所示:

但是,我的主要关注点是网站而不是 webapps 1,所以通过 javascript 添加 css 感觉很奇怪。但我可能只是过时了,所以我想知道:加载器是用于所有 css,还是只用于加载 css 的小条件部分?

如果它可以用于加载所有 css,那么在使用生成的 webpackbundle.js注入 css 而不是直接在 html 中链接 css 文件时会不会有任何惩罚?此外,如果未启用 javascript,它显然会中断吗?


1:不同之处在于我的动态内容很少,javascript 在这些网站中只扮演次要角色,而且我不是使用 javascript 进行路由,而是有页面的静态 .html 文件

0 投票
1 回答
2654 浏览

javascript - Webpack multiple 需要解析到同一个文件但被导入两次

您好,我刚刚遇到了 webpack 的这个问题。如果我require('../something')从一个文件中执行,然后我require('../../something')在另一个文件中执行,它们最终都会解析为同一个文件。但是,如果您查看输出包,则会发现两个不同的 webpack 函数都具有相同的内容。我很确定我可以使用别名来解决这个问题,然后require('something')在两个文件中都这样做。但这是正确的方法还是我错过了什么?

顺便说一句,我需要这个,因为它会导致 angularjs 未定义我的控制器的几个问题。

0 投票
3 回答
27652 浏览

webpack - webpack 中的当前文件路径

有什么方法可以接收当前文件路径,比如在 requirejs 中?

0 投票
4 回答
3645 浏览

javascript - 如果模块不存在,我如何让 webpack 跳过它

我正在尝试使用 WebPack 来包含“摊牌”。问题是摊牌将需要(“fs”)并检查返回值。这使得 WebPack 抛出错误。

似乎应该可以将 Webpack 配置为生成 shim,以便调用 require("fs") 将返回 false。

也许其中一种技术可能有效:http ://webpack.github.io/docs/shimming-modules.html

这是 Showdown.js 代码。如果我在节点模块目录中注释掉这段代码,问题就解决了。但是,应该有更好的方法。

0 投票
2 回答
2355 浏览

javascript - 将 ES6 模块与 WebPack 一起使用,为什么仍然需要 require

在下面的代码示例中,为什么注释行不能导入标记?我正在使用https://github.com/shama/es6-loader

这是一个示例存储库:https ://github.com/justin808/react-tutorial-hot/tree/es6

这个演示展示了: 1. Webpack 和热重载 2. React 3. ES6

0 投票
1 回答
378 浏览

node.js - 如何使用 webpack 手动测试 react 组件?

我知道我们应该对我们的组件使用单元测试。但我还想要的是某种方式来单独手动测试我们的组件。因为我们正在进行小冲刺,我们必须在页面首先使用该组件之前交付一些完成的组件。我希望看到完整的组件真正起作用(即测试与 css 和子组件的集成)。

因此,首先,我希望看到在黑页中呈现的新组件直接使用该组件,而是从查询字符串参数中获取该组件名称/路径。然后我计划向该页面添加一些通用组件配置(例如,带有 json 的文本框表示要传递给该组件的道具)。

我现在面临的第一个问题是关于如何配置webpack-dev-middlewarewebpack-dev-server以能够加载通过参数传递的组件。

有人知道怎么做吗?或者更好的方法来处理这个?

0 投票
1 回答
4631 浏览

javascript - 使用 webpack 处理具有外部依赖项的 AMD 库

我有一个以 AMD 风格编写的库,可以与 RequireJS 一起使用。jqueryjquery-ui假定由图书馆的用户提供。说它看起来像这样:

我试图弄清楚 webpack 是如何工作的。例如,假设我想将这些文件捆绑到单个 AMD 样式库文件中,该文件仍然假定jquery并且jquery-ui从外部:

这是如何实现的?

main-lib.js当我使用as -point 运行 webpack 时entry,它会抱怨找不到jqueryjquery-ui. 如果我用 配置正确的路径resolve.alias,它会捆绑jqueryjquery-ui进入out.js,这不是我想要的。我尝试使用output.externals无济于事。

0 投票
4 回答
21672 浏览

javascript - 与 webpack/browserify 捆绑时如何排除代码路径?

我有一个可以与 node.js 和浏览器一起使用的库。我正在使用 CommonJS,然后使用 webpack 发布 Web 版本。我的代码如下所示:

我遇到的问题是,当我运行 webpack(browserify 也会这样做)时,生成的输出包括http它的所有依赖项。这会产生一个对于浏览器性能来说不是最佳的巨大文件。

我的问题是如何在运行模块捆绑器时排除节点代码路径?我通过使用 webpack 的外部临时解决了这个问题,并且在包含'./adapters/http'. 这并不能解决其他开发人员使用 CommonJS 依赖我的库的用例。除非他们使用类似的排除配置,否则他们的构建最终会遇到同样的问题。

我看过使用 envify,只是想知道是否有另一个/更好的解决方案。

谢谢!

0 投票
14 回答
245570 浏览

javascript - 如何使用 webpack 构建压缩和未压缩的包?

这是我的webpack.config.js

我正在建造

在我的dist文件夹中,我只得到

  • bundle.min.js
  • bundle.min.js.map

我也想看看未压缩的bundle.js