如何在Next.js中使用webpack5配置？

html5 • • 问答

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

我的环境：

  • 纱线@1.22.5
  • 节点@12.13.0

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

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

回答

从 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) {
    config.experiments = {};
    return config;
  },
};

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

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

  • @juliomalves yes, you were faster by 12 seconds! Not sure why my answer was picked 🙂

回答

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

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

module.exports = {
    webpack5: false
}

在 Next.js 11 之前，有一个future标志可以在next.config.js.

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

以上是如何在Next.js中使用webpack5配置？的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>