如何在 Next.js 中使用 webpack 5 配置? [英] How to use webpack 5 configs in Next.js?

问题描述

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

I am trying to add experiments to the webpack config but am unable to determine what I am doing wrong.

我的环境:

• yarn@1.22.5
• node@12.13.0

我使用 npx create-next-app blog

基于什么我读过我需要向 package.json 添加一个分辨率属性，如下所示:

Based on what I have read I need to add a resolutions property to the package.json like so:

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

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

And then in next.config.js I have the following:

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 我收到以下错误:

and when I yarn dev I get the following error:

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

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

If you notice the required module webpack version is 5.21.2 but the version being used inside the config settings is 4.44.1.

推荐答案

你需要为它设置一个标志:

You need to set a flag for it:

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

这篇关于如何在 Next.js 中使用 webpack 5 配置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！