前言
Next.js 是一款基于 React 的 SSR（服务端渲染）框架，它提供了许多开箱即用的功能，如文件系统路由、静态导出、动态导入等。但在某些场景下，我们需要进行一些自定义的 webpack 配置，例如优化打包体积、添加 less/sass 支持等。本文就是要介绍如何进行自定义 webpack 配置。
安装 Next.js
在开始自定义 webpack 配置前，必须先安装 Next.js。
npm install next react react-dom
自定义 webpack 配置
Next.js 内置了一套 webpack 配置，但它也提供了自定义 webpack 配置的方法。我们只需要在项目根目录创建 next.config.js 文件，并导出一个包含自定义配置的对象即可。
常用的自定义配置有：
webpack：覆盖默认的 webpack 配置。webpackDevMiddleware：配置用于开发环境的 webpack-dev-middleware。webpackHotMiddleware：配置用于开发环境的 webpack-hot-middleware。sassOptions：配置 sass-loader 的选项。lessOptions：配置 less-loader 的选项。
我们来通过一个具体的例子来演示如何进行自定义 webpack 配置。
添加 less 支持
假设我们的项目需要使用 less 样式预处理器，我们就需要添加 less-loader 和 less 插件。首先安装相关依赖：
npm install less less-loader --save-dev
然后在 next.config.js 中添加 less 加载器：
-- -------------------- ---- -------
-------------- - -
-------- -------- - -------- -- -- -
-- -- ---- ---
--------------------------
----- ----------
---- -
-
------- ---------------
--
-
------- -------------
--
-
------- --------------
--
--
---
-- -- ---- --
-- ----------- -
-------------------------------------------------- - -
----- ---------
----- ----------
------- ------
-------- -----
--
-
------ -------
--
--我们在 webpack 方法中添加了一个 less 处理器，它会将 less 文件编译成 css，并使用 style-loader 把 css 代码注入到 html 中。同时我们还配置了一个合并 css 的插件，它会把所有 less 编译出来的 css 合并到一个文件中，以减少 http 请求次数。
添加 HtmlWebpackPlugin 插件
HtmlWebpackPlugin 是一个能够生成 html 文件的 webpack 插件，配合 html-webpack-plugin 可以非常方便地实现自动化生成 html 文件和压缩文件的功能。我们来看一个例子，在根目录下新建一个 public/index.html 文件，并在 next.config.js 中添加 HtmlWebpackPlugin 插件。
首先安装依赖：
npm install html-webpack-plugin --save-dev
-- -------------------- ---- -------
----- ----------------- - -------------------------------
----- ---- - ----------------
-------------- - -
-------- -------- - -------- -- -- -
-- ---
-- ----------- -
-- -- ----------------- --
--------------------
--- -------------------
------- -----
--------- -------------------- ---------------------
--
--
-
------ -------
--
--我们在 webpack 方法中添加了一个 HtmlWebpackPlugin 插件，它会根据模板文件生成 html 文件，并自动插入 js 和 css 文件的引用。在模板文件中可以使用模板语法，例如 <%= process.env.NODE_ENV %> 可以输出环境变量。
总结
通过本文的介绍，我们了解了如何在 Next.js 中进行自定义 webpack 配置，包括添加 less/sass 支持和 HtmlWebpackPlugin 插件。当然，webpack 的配置项众多，本文只是介绍了一部分常用的配置，更多定制化的配置需要参照官方文档进行实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6473ffec968c7c53b0171e00