如何在 next.config.js 文件中的一个模块module.exports中组合多个导出？

问题描述

当我将 "next-videos" loader 添加到 next.config.js 时，只要 module.exports 是最后一个，它就可以完美运行：

module.exports = withVideos()

另一方面，它破坏了位于上面的另一个 module.exports 实例：

module.exports = {
   images: {
     domains: ['cdn.shopify.com'],},};

基本上，它会覆盖之前的每个 module.exports。合并这些导出的规则是什么？我想我需要将它们放在一个模块下，但是这样做的规则是什么？我搞砸了语法，每次尝试将它重新定位到一个 module.exports 下都以新错误结束

总结一下问题：

在单个导出中组合模块的规则是什么？我如何将它与我之前的所有 module.exports 组合？
我真的需要在 next.config 中留下重复上面相同部分的“webpack(config)”部分吗？我从不同的来源收集了它，现在试图弄清楚如何真的有用吗

webpack(config) { 
  config.module.rules.push(

内容 next.config.js：

const withPlugins = require('next-compose-plugins');
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');
const withImages = require('next-images');
const withVideos = require('next-videos');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',});

// next.config.js
module.exports = withPlugins(
    [[withImages],[withSass],[withCSS],[withVideos]],{
        plugins: ['postcss-import','tailwindcss','autoprefixer'],serverRuntimeConfig: {
            mySecret: 'secret',secondSecret: process.env.SECOND_SECRET,// Pass through env variables
        },publicRuntimeConfig: {
            // Will be available on both server and client
            staticFolder: '/public',module: {
            loaders: [
                {
                    test: /.jsx?$/,loader: 'babel-loader',exclude: /node_modules/,{
                    test: /\.css$/,loader: 'style-loader!css-loader',{
                    test: /\.jsx?$/,use: ['babel-loader','astroturf/loader'],{
                    test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,loader: 'url-loader?limit=100000',{
                    test: /\.(eot|woff|woff2|otf|ttf|svg|png|jpg|gif|webm)$/,use: {
                        loader: 'url-loader',options: {
                            limit: 100000,name: '[name].[ext]',{
                    test: /\.mp4$/,use: 'file-loader?name=videos/[name].[ext]',{
                    test: /\.style.js$/,use: [
                        'style-loader',{
                            loader: 'css-loader',options: { importLoaders: 1 },{
                            loader: 'postcss-loader',options: { parser: 'sugaRSS',exec: true },],webpack(config) {
            config.module.rules.push(
                {
                    test: /\.(eot|woff|woff2|otf|ttf|svg|png|jpg|gif)$/,'css-loader',{
                    test: /\.(js|jsx)$/,'eslint-loader'],);
            withBundleAnalyzer({});
            return config;
        },{
        images: {
            domains: ['cdn.shopify.com'],withVideos(),);

module.exports = {
    extends: 'airbnb-base',rules: {
        'arrow-body-style': 0,};

module.exports = {
    images: {
        domains: ['cdn.shopify.com'],};

module.exports = withVideos();

先谢谢你，如果有人能澄清这一点，我将不胜感激。

解决方法

您似乎错误地将多个配置混合到 Next.js 配置文件中。

首先，您的 next.config.js 应该只有一个 module.exports，并且由于您使用的是 next-compose-plugins，因此它应该大致遵循以下结构：

// next.config.js

// Omitting requires for simplicity
 
module.exports = withPlugins(
    [withImages,withSass,withCSS,withVideos,withBundleAnalyzer],// All next plugins go here
    // Below is the main Next.js config object
    { 
        images: {
            domains: ['cdn.shopify.com']
        },serverRuntimeConfig: {
            mySecret: "secret",secondSecret: process.env.SECOND_SECRET // Pass through env variables
        },publicRuntimeConfig: {
          // Will be available on both server and client
          staticFolder: "/public"
        },// From here everything that's Webpack-related
        webpack(config) {
            // Add your custom Webpack configs
            return config;
        }
    }
);

此外，以下配置属于您的 ESlint 配置文件，而不是 Next.js 配置。

// .eslintrc.js
module.exports = {
    extends: 'airbnb-base',rules: {
        'arrow-body-style': 0,},};

module.exports webpack webpack webpack