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

unhi4e5o 于 2023-02-22 发布在 Webpack

关注(0)|答案(3)|浏览(459)

我正试图将experiments添加到webpack配置中，但无法确定我做错了什么。
我的环境：

Yarn@1.22.5
节点@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。

next.js

来源：https://stackoverflow.com/questions/66124104/how-to-use-webpack-5-configs-in-next-js

3条答案

按热度按时间

qltillow1#

从Next.js v11开始，Webpack 5现在是所有Next.js应用程序的默认设置：
Webpack 5现在是所有Next.js应用程序的默认配置。如果您没有自定义Webpack配置，您的应用程序已经在使用Webpack 5。如果您有自定义Webpack配置，您可以参考Next.js webpack 5 documentation以获取升级指南。
对于先前版本的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的最新版本时使用webpack4

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

赞(0）回复(0）举报 2023-02-22

eulz3vhy2#

由于Next.js 11 webpack 5现在默认使用，没有额外的配置。
您仍然可以通过在next.config.js中将webpack5设置为false来使用webpack 4。

module.exports = {
    webpack5: false
}

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

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

赞(0）回复(0）举报 2023-02-22

a64a0gku3#

正式文件：https://nextjs.org/docs/messages/webpack5
后藤**next.config.js**

将下面的代码段与 future flag 一起添加

future: {
    webpack5: true,
  }

我的下一个配置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,
  },
};

特点

赞(0）回复(0）举报 2023-02-22

我来回答

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

3条答案

相关问题

热门标签

最新问答