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

Question

我正在尝试将实验添加到webpack配置中，但无法确定我做错了什么。

我的环境：

• yarn@1.22.5
• node@12.13.0

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

根据我所阅读的内容，我需要在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。

- Peter W

---

下一个版本是什么？ - felixmosh

@felixmosh 10.0.6 - Peter W

Answer 1

从Next.js v11 Webpack 5开始，它成为了所有Next.js应用程序的默认选项:

Webpack 5现在是所有Next.js应用程序的默认值。如果您没有自定义webpack配置，则您的应用程序已经在使用webpack 5。如果您有自定义webpack配置，则可以参考Next.js webpack 5文档进行升级指导。

对于先前版本的Next.js，您需要在next.config.js中设置标志:

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

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

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

- Danila

---

我确实比你快了几秒钟，但还是给你点赞了！ - juliomalves

@juliomalves或Danila，那个future属性的文档在哪里？ - Peter W

@juliomalves 是的，你快了12秒！不确定为什么我的答案被选中 :) - Danila

Answer 2

自从 Next.js 11 开始，默认使用 webpack 5，无需额外配置。

如果需要使用 webpack 4，请在 next.config.js 中将 webpack5 设置为 false。

module.exports = {
    webpack5: false
}

---

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

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

- juliomalves

---

谢谢你回答，我会给你一个+1的赞同，因为你也回答了。 - Peter W

现在，Next.js 已经记录了这一点：Webpack 5 Adoption。 - juliomalves

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,
  },
};

特性

- Joshua Poddoku