前言
Next.js 是一款由 Zeit 开发的 React 服务器端渲染框架，它提供了很多便利的功能，如自动代码拆分、静态文件导出、CSS 模块导入等。对于任何一个前端开发者来说，Webpack 都是一个必须掌握的工具之一。但是，对于初学者来说，Webpack 的配置特别复杂。本文将介绍如何在 Next.js 中配置 Webpack。
环境
在开始之前，请确保你已经熟悉了以下工具：
- Node.js 和 npm（或 yarn）
- React.js
- Next.js
- Webpack
Webpack 配置
在 Next.js 中，Webpack 配置默认是隐藏在它的源码中的，但是 Next.js 提供了一些 API 用于扩展默认配置。创建一个名为 next.config.js 的文件，在其中编写以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
-------- -------- - -------- ---- --------- --------------- ------- -- -- -
-- ------
-- --------
------ -------
-
--修改默认配置
这里有几个实用的例子，可根据你的需求来调整配置。
自定义 Webpack 入口
有时，你需要修改默认入口文件（即 ./pages/index.js）。为此，你可以利用 entry 属性：
config.entry = './src/index.js'; // 具体路径请根据自己的需求来调整
自定义 Webpack 输出路径
有时，你可能不想创建名为 .next 的目录，而是希望将构建文件输出到另一个地方。为此，你可以利用 output 属性：
config.output.path = path.join(__dirname, 'build'); // 构建文件输出的目录，请自行更改
自定义 Webpack Loader
有时，你需要添加一个自定义的 Webpack Loader。为此，你可以利用 module.rules 属性：
config.module.rules.push({
test: /\.md$/,
use: 'raw-loader'
});上例中，我们使用了 raw-loader 来处理 Markdown 文件。
返回修改后的配置
配置代码编写好后，需要将其返回。下面是一个完整的配置文件，它自定义了 Webpack 入口并添加了一个自定义 Loader。
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
-------- -------- - -------- ---- --------- --------------- ------- -- -- -
-- -----
------------ - -----------------
-- -------
------------------ - -------------------- ---------
-- --- ------
--------------------------
----- --------
---- ------------
---
-- --------
------ -------
-
--总结
本文简要介绍了如何在 Next.js 中配置 Webpack。通过扩展默认配置，我们可以根据需要自定义 Entrypoint、输出路径或 Loader。希望这篇文章能够帮助你更好地理解 Next.js 和 Webpack！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646207d5968c7c53b035cebd