javascript - 如何在 Next.js 中使用 webpack 5 配置？

Question

我正在尝试添加 experiments到 webpack 配置，但无法确定我做错了什么。
我的环境:

yarn @1.22.5

节点@12.13.0

我用 npx create-next-app blog 创建了一个全新的下一个应用程序
基于I have read我需要像这样向 package.json 添加一个 resolutions 属性:

"dependencies": {
    "next": "10.0.6",
    "react": "17.0.1",
    "react-dom": "17.0.1"
},
"resolutions": {
  "webpack": "5.21.2"
}

然后在 next.config.js 我有以下内容:

const webpack = require("webpack");
console.log(webpack.version); // 5.21.2
module.exports = {
  webpack: function (config, options) {
    console.log(options.webpack.version); // 4.44.1
    config.experiments = {};
    return config;
  },
};

当我 yarn dev我收到以下错误:

- configuration[0] has an unknown property 'experiments'.

如果你注意到所需的模块 webpack 版本是 5.21.2但是配置设置中使用的版本是4.44.1 .

Answer 1

从 Next.js v11 Webpack 5 is now the default 开始对于所有 Next.js 应用程序:

Webpack 5 is now the default for all Next.js applications. If you did not have custom webpack configuration your application is already using webpack 5. If you do have custom webpack configuration you can refer to the Next.js webpack 5 documentation for upgrading guidance.

对于 Next.js 的早期版本，您需要在 next.config.js 中为其设置一个标志。 :

module.exports = {
  future: {
    webpack5: true,
  },
  webpack: function (config, options) {
    config.experiments = {};
    return config;
  },
};

在升级到最新版本的 Next.js 时，您仍然可以使用 webpack 4，方法是添加 webpack5: false旗帜

module.exports = {
  // Note: no `future` key here
  webpack5: false,
}