NextJS中文文档 - Webpack
注意:webpack 配置的更改不在语义化版本的覆盖范围内,所以请自行承担风险
在继续为你的应用添加自定义 webpack 配置之前,请确保 Next.js 尚未支持你的用例:
一些常见的功能以插件形式提供:
为了扩展我们对 webpack
的使用,你可以在 next.config.js
中定义一个扩展其配置的函数,如下所示:
js
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }) => {
// 重要:返回修改后的配置
return config
},
}
1
2
3
4
5
6
2
3
4
5
6
webpack
函数会被执行三次,服务器端两次(nodejs / edge 运行时)和客户端一次。这允许你使用isServer
属性区分客户端和服务器端配置。
webpack
函数的第二个参数是一个具有以下属性的对象:
buildId
:String
- 构建 ID,用作构建之间的唯一标识符。dev
:Boolean
- 表示编译是否将在开发环境中完成。isServer
:Boolean
- 对于服务器端编译为true
,对于客户端编译为false
。nextRuntime
:String | undefined
- 服务器端编译的目标运行时;可以是"edge"
或"nodejs"
,对于客户端编译则为undefined
。defaultLoaders
:Object
- Next.js 内部使用的默认加载器:babel
:Object
- 默认的babel-loader
配置。
defaultLoaders.babel
的使用示例:
js
// 添加依赖于 babel-loader 的加载器的配置示例
// 此源代码取自 @next/mdx 插件源:
// https://github.com/vercel/next.js/tree/canary/packages/next-mdx
module.exports = {
webpack: (config, options) => {
config.module.rules.push({
test: /\.mdx/,
use: [
options.defaultLoaders.babel,
{
loader: '@mdx-js/loader',
options: pluginOptions.options,
},
],
})
return config
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
nextRuntime
请注意,当 nextRuntime
为 "edge"
或 "nodejs"
时,isServer
为 true
,当前 nextRuntime
"edge"
仅用于中间件和 Edge 运行时中的服务器组件。