使用Next.js的Webpack 5配置文件加载器选项

文章/答案/技术大牛

发布

2回答

webpack、next.js

我正在尝试将Nextjs应用从Webpack 4升级到Webpack 5，目前我使用的是file-loader，在next.config.js中有选项： // next.config.js module.exports我想知道如何才能满足在file-loader中使用的options。如何同时设置公共和文件系统路径和文件名？我尝试过使用output和generator.filename配置，但我完全不知道应该将<e

浏览 176提问于2021-05-05得票数 7

3回答

如何在Next.js中使用webpack 5吐露？

javascript、webpack、next.js

我试图将experiments添加到webpack配置中，但无法确定我做错了什么。我的环境：基于，我需要向package.json添加一个分辨率属性": "5.21.2"然后在next.config.js中，我有以下内容：console

浏览 13提问于2021-02-09得票数 12

回答已采纳

1回答

能否让PhpStorm/WebStorm知道Next.js的webpack配置中的自定义加载程序？

webpack、next.js、phpstorm

我使用自定义webpack配置，详见。PhpStorm有，但是，由于没有实际的webpack配置文件，那么如何将它们的IDE与自定义的Next.js webpack配置集成？我遇到的一个问题是PhpStorm抱怨我试图导入的SVG不是一个模块(这是正确的)。但是，这是因为我使用的是@svgr/webpack加载

浏览 8提问于2022-01-19得票数 1

1回答

TypeError:升级到Nextjs 11后无法读取未定义的属性“”forEach“”

next.js

我已经将我的项目升级到了nextjs 11，不幸的是，我的一些代码出错了。我同样将React从16.0.0版本升级到了17.0.0，这样我就可以升级到next.js了。下面是出错的代码片段，它位于我的next.config.js文件中： config.module.rules[1].oneOf.forEach((moduleLoader, i) => {配置相关的不同错误： webpack: (config, { buildId, dev, i

浏览 20提问于2021-06-22得票数 1

回答已采纳

2回答

在添加更少的支持期间，无法设置下一个js中未定义的属性“样式”

javascript、reactjs、next.js

我试图用antd设计在下一个js项目中添加对较少文件的支持，但无法设置未定义的属性“样式”。我想自定义antd主题，但是这个错误对我来说是一个障碍，任何人有任何想法，请帮助我解决这个问题。javascriptEnabled: true, },@link-hover-decoration: underline; @input-hover-borde

浏览 1提问于2021-07-13得票数 4

1回答

使用Next.js在Material中添加自托管字体

reactjs、webpack、material-ui、next.js

当我尝试在使用Next.js的资料UI 5中添加自托管字体时，我遇到了一个问题。我发现了一个错误： module.exports = { rules:(woff|woff2|eot|ttf|otf)$/,

浏览 7提问于2021-09-28得票数 4

3回答

类型转录体es6 .js依赖于es5

javascript、typescript、ecmascript-6、tsconfig、create-react-app

...因此，我的问题是，类型记录编译器的输出文件是我编译的源代码的一个巨大的级联，加上所有的性能。有没有一种方法可以告诉类型记录编译器/转换程序也输出javascript依赖项上的es5？如果您关心的话，上下文：我犯了一个可怕的错误，使用react-create-app-typescript和react-scripts-ts作为我的React应用程序的</

浏览 1提问于2018-04-29得票数 19

回答已采纳

1回答

Next-optimized-images:错误模块分析失败，意外字符''“

performance、frontend、next.js、webpack-4

我正在尝试使用next-optimized-images优化我的nextjs页面图像这是next.config.js： module.exports = { webpack(config) { config.resolve.alias.images =下面是如何将镜像导入到组件中： require(`public/assets/icons/${iconName}`) 我的错误： .

浏览 67提问于2020-11-05得票数 1

2回答

如何在next.config.js文件中组合多个插件？

javascript、webpack、next.js

合并这些出口的规则是什么？我想我需要把它们放在一个模块下，但是规则是什么呢？我搞砸了语法，每次尝试把它重新定位到一个module.exports下，都会出现新的错误。只是总结问题：，我真的需要离开“webpack(配置)”部分吗?在next.config中复制上面相同的部分吗？，我从不同的来源收集了它，现在试图弄清楚它是如何工作的。<e

浏览 0提问于2021-01-06得票数 3

回答已采纳

1回答

使用与Webpack的反应

reactjs、webpack

我用React配置了Webpack，但是我遇到了各种各样的bug，比如事件处理程序的工作方式不同，导入css很棘手，而且更.我知道所有这些问题都可以解决，但整个反应+ Webpack的婚姻看起来如此脆弱我知道这个问题已经问过了(5年前)，但在那之后发生了很大的变化.

浏览 5提问于2021-03-02得票数 1

回答已采纳

2回答

为什么我们要在React项目中使用下一个js配置文件？使用它的主要目的是什么？

reactjs、next.js、configuration-files

我需要知道配置文件的情况。为什么我们要用它来反应项目。

浏览 6提问于2021-04-04得票数 0

1回答

Next.js:如何改变CSS模块类的输出格式？

css、reactjs、webpack、next.js

"desktop__menu-item--2feEH"></li> 如何将component.module.css CSS类改成[path][name]__[local]--[hash:base64:5]我正在使用Next.js v10.0.9

浏览 18提问于2021-03-24得票数 1

回答已采纳

2回答

Webpack错误: configuration.module

javascript、webpack、configuration

我犯了一个不寻常的webpack错误，我不知道怎么改正。PS E:\HTL\Projects\EasyWater\Software\Beispielprojekte\WebPack_Dummy> webpack The CLIwebpack-cli

浏览 0提问于2018-03-05得票数 4

回答已采纳

2回答

下一步构建命令失败:错误命令失败，退出代码1

reactjs、webpack、next.js、antd

我需要在我的下一个项目中添加antd。distDir: '_next', maxInactiveAge: 1000 * 60 * 60, webpack: (config, { dev }) => { }, ], ],); 我认为webpack</

浏览 0提问于2019-07-26得票数 0

1回答

webpack装载机“找不到模块”

javascript、reactjs、module、webpack、loader

我使用自定义webpack为我的应用程序与Next.js：const Webpack = require('webpack'); webpack: (config, { dev }) => { new Webpack.DefinePlugin(

浏览 2提问于2017-07-27得票数 2

回答已采纳

1回答

如何使用React.js和Node.js将所需资源仅加载到客户端浏览器

node.js、reactjs、architecture、server-side-rendering、saas

在第一次加载时，我需要在不同的组件之间切换。我的确切问题：我对系统中的100+角色具有500+权限。有些角色只能获得1到10个权限。这将导致在前端的客户端浏览器中切换和显示该权限的唯一组件。我的主要问题是，为什么我应该在用户没有访问权限的客户端浏览器中加载不需要的组件? 问题示例：管理员在其系统中只向Mr.John授予了3种权限。如果Mr.

浏览 4提问于2020-04-09得票数 2

回答已采纳

2回答

WebpackOptionsValidationError:无效的配置对象

reactjs、npm、webpack

已使用与API架构不匹配的配置对象初始化了Webpack。-配置具有未知属性'devtools‘。这些属性是有效的: object { amd?，bail?，cache?，context?对于加载器选项: webpack 2不再允许在配置中自定义属性。应更新加载器以允许通过module.rules中的加载器选项传递选项

浏览 0提问于2017-08-16得票数 0

1回答

webpack配置文件中的devtool和其他插件(例如UglifyjsWebpackPlugin)的源地图选项有什么不同？

webpack、webpack-4

我们知道，webpack根配置文件提供了devtool选项来设置源映射。但其他插件和加载器，例如UglifyjsWebpackPlugin、vue加载器，也提供了源地图选项。它们之间的区别是什么？

浏览 0提问于2018-11-21得票数 0

1回答

聚合物3+ webpack* +巴别塔类构造函数PolymerElement不能在没有'new‘的情况下调用*

javascript、webpack、polymer、babeljs、mixins

它工作得很好，但只要我尝试用babel转换我的代码，我就会得到类构造函数PolymerElement不能在没有'new的情况下被调用。我确信这个问题与用转换后的类代码扩展本机类有关，但是我还找不到能够解决我的问题的资源/示例。我猜我需要以不同的方式配置我的babel，但正如我所说，找到的示例没有帮助。您可以访问我在此处重现错误的存储库：这是我的webpack配置： const

浏览 14提问于2019-01-18得票数 2

回答已采纳

2回答

将CSS模块kebab-case类名转换为camelCase in Next.js

reactjs、sass、next.js、css-modules

我使用CSS模块(.scss)和Next.js，并有一个烤肉串命名约定。换句话说，类似这样的事情： background: #fff;我面临的问题是，为了在className中使用它，我必须像styles["member-btn"]<Button className={styles["member-btn"]}></Button> 但是，我想将它与style

浏览 17提问于2022-10-12得票数 3

回答已采纳

点击加载更多