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

Question

我正在尝试向 webpack 配置添加experiments ，但无法确定我做错了什么。

我的环境：

• 纱线@1.22.5
• 节点@12.13.0

我使用npx create-next-app blog创建了一个全新的下一个应用程序

根据我所阅读的内容，我需要向package.json添加分辨率属性，如下所示：

"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现在是所有 Next.js 应用程序的默认值：

Webpack 5 现在是所有 Next.js 应用程序的默认值。 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;
  },
};

并且您仍然可以使用 webpack 4，同时通过添加webpack5: false标志升级到最新版本的 Next.js

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

Answer 2

由于现在默认使用 Next.js 11 webpack 5，无需额外配置。

您仍然可以通过在webpack5设置为false来使用next.config.js 4。

module.exports = {
    webpack5: false
}

---

在 Next.js 11 之前，可以在next.config.js中为 Webpack 5 启用一个future标志。

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

Answer 3

官方文档： https://nextjs.org/docs/messages/webpack5

转到next.config.js

在下面添加带有future flag的代码段

  future: {
    webpack5: true,
  }

我的next.config.js

const path = require("path");

module.exports = {
  trailingSlash: true,
  webpackDevMiddleware: (config) => {
    config.watchOptions = {
      poll: 1000,
      aggregateTimeout: 300,
    };

    return config;
  },
  sassOptions: {
    includePaths: [path.join(__dirname, "styles")],
  },
  future: {
    webpack5: true,
  },
};

特征