问题标签 [webpack-loader]

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 回答
324 浏览

webpack - 如何通过 Webpack 在文件上运行任意 bash 脚本,而无需为每种文件类型维护加载器?

似乎 Webpack 运行通过“加载器”转换代码的工具,而不是直接使用这些工具的 API。这在这些工具上增加了一层抽象,这有时意味着工具的 API 没有完全公开,或者工具的更新需要时间才能在加载器中更新。这是对问题的更详细描述

我在使用 Grunt/gulp 时遇到了这个问题,最终放弃了那些支持直接使用我通过 npm 运行的 bash 脚本转换我的源代码的问题。是否可以用 Webpack 做同样的事情?如果是这样,怎么做?

0 投票
4 回答
3860 浏览

reactjs - ReactJS - 包括 main.scss 中的其他 scss 文件

在我的 reactJS 应用程序中 - 我将所有 .scss 文件包含在一个 main.scss 文件中 - 在 src 文件夹中的样式文件夹下。我有以下 webpack 配置。尝试将 main.scss 文件直接包含在我的主要组件中 - 在我导入其他 scss 文件的“@import”处出现错误。如果我包含单独的 scss 文件样式很好 - 但是如何使用一个 main.scss 文件以及如何包含它?

错误:意外的令牌,预期的((1:8)

1 | @import '我的组件';

index.js

0 投票
1 回答
1191 浏览

webpack - 覆盖特定文件的 webpack 加载器配置

我用vue-webpack-boilerplate设置了我的新项目,我在其中使用了jsoneditor。默认的 webpack 配置将所有图像资产捆绑在img目录中,但jsoneditor期望其图标位于css/img目录中。

我发现了带有规则配置的webpack.base.conf.js文件,其设置如下:

因此,更改utils.assetsPath('img/[name].[hash:7].[ext]'),utils.assetsPath('css/img/[name].[hash:7].[ext]'),成功了,但我只想将此规则应用于jsoneditor-icons.svg文件。

这样做会exclude: [path.join(resolve('node_modules'), './jsoneditor/dist/img')],阻止 webpack 将jsoneditor -icons放入/img文件夹,但还有一条附加规则

没有做任何事情。

有人可以指出我的错误吗?目标是保留原始 webpack 配置,并且只覆盖jsoneditor-icons.svg文件的规则。

0 投票
0 回答
74 浏览

javascript - css 文件不是通过使用 webpack 3 的 extract-text-webpack-plugin 单独生成的

我试图使用带有 webpack@3.6.0 的 extract-text-webpack-plugin 根据块名称为 css 创建一个单独的包。

我花了更多时间和谷歌搜索来确定这个问题,但我找不到它。我为此尝试了更多选择。

我将在这里分享我的 webpack.config.js 文件,

我在 bitbucket 服务器中添加了一个 web pack 配置。请从以下 URL https://bitbucket.org/nishanth7475/webpackconfigalone/src/dca35d8c0eb31debfcefa2f7f282f987604b6d97?at=master找到它

0 投票
1 回答
53 浏览

webpack - 配置 Webpack 以查找与目录名称匹配的文件

我正在为 React 应用程序设置环境。我正在使用 Babel 和 Webpack。

目前,我的所有组件都在遵循此命名方案的文件中实现:

现在,我可以导入这些组件的唯一两种方法是创建一个index.jspackage.json文件,并将它们指向 Javascript 文件,或者编写完整的导入;import Component1 from '/components/Component1/Component1

是否可以配置 Webpack,以便在查找index.jsand之后package.json,它会查找与当前目录名称 + 匹配的文件.js

0 投票
0 回答
183 浏览

webpack - srcset-loader 创建损坏的文件 (webpack)

我正在尝试用于srcset-loader为项目创建 srcSet 和不同大小的图像。srcset-loader 工作正常并输出以下内容:

我的本地服务器正在运行,localhost:3003所以当我尝试访问时

localhost:3003/public/build/images/2322f015aeeee277d059fe0263f57559.png

它将图像显示为: 显示图像的屏幕截图

我的 webpack 配置如下加载图像:

因此,通过 url 访问时,基本上会提供文本/字符串:

module.exports = __webpack_public_path__ + "images/654e6b8201639fdb1e9c2508b226a960.png";

任何帮助表示赞赏。提前致谢。

0 投票
0 回答
272 浏览

javascript - 如何为 webpack2 正确使用 inline-svg-loader?

我在我的模块中设置它并且它没有错误地构建,但是,我的 svg 最终看起来像这样:在此处输入图像描述

并且经过检查,它看起来像模块在 img 的 src 属性中内联了 svg:在此处输入图像描述

我怎样才能让这个加载器正确地内联我的 svg?

我的 webpack.config.js 文件如下所示:

0 投票
1 回答
19089 浏览

webpack - Webpack 升级 - 找不到模块:无法解析 node_modules

我目前正在从 Webpack 1 升级到 2,然后升级到 3。在这次升级中,我按照1 => 22 => 3的说明遵守了迁移说明。

我遇到的问题是,node_modules在我的代码中似乎没有一个已安装的软件包在client/app/bundles. 我得到的所有 node_modules 的错误都在以下结构中:

./node_modules/alt/lib/store/StoreMixin.js 中的错误 || 找不到模块:错误:无法解析“client/node_modules/alt/lib/store”中的“transmitter”

我的理论是,在某个地方我的 , 或 版本不匹配file-loaderexpose-loader因为imports-loader如果没有正确的版本,模块就不会被导入是有道理的。我确保所有的module.rules加载器都以-loader模式结尾。yarn install也成功没有错误。

我的依赖和Webpack配置如下:

包.json

文件结构

webpack.client.rails.config.js

webpack.client.base.config.js

0 投票
0 回答
351 浏览

php - 我是否需要在 webpack 2 中使用 php-loader 添加任何额外内容

我正在制作一个销售系统来记录和监控销售。我正在使用 webpack 来捆绑我的所有代码。对于后端,我使用的是 PHP 和 MySql。我遇到了 php-loader 包。描述说它将加载任何php内容并使用php将其转换为html页面。我不太确定我是否完全理解它的工作原理。如果要将其转换为 HTML 页面,我是否需要 html-loader。如果是,我应该如何将它放在 webpack.config.js 文件中?请指导我完成这个?提前致谢!

0 投票
1 回答
1534 浏览

webpack - Electron-webpack:css 和 html 加载器无法正常工作

我有一个电子应用程序。我想将它与 webpack 捆绑,但我似乎无法解析 css 和 html 文件。我添加了html-loaderandcss-loader这是我的配置文件:

我不断收到此消息:

对于 HTML 文件,我得到同样的错误:

我调用 HTML 文件的地方是:

最奇怪的是 - 我调用css文件的唯一地方是文件内部html(使用link标签)。

关于可能是什么问题的任何想法?