如何在 next.config.js 中添加两个以上的插件

Posted 2023-03-06

【中文标题】如何在 next.config.js 中添加两个以上的插件

【英文标题】：How to add more than two plugins in a next.config.js

【发布时间】：2019-07-04 03:17:57

【问题描述】：

我想在我们公司的项目中实施 sass 和 BEM 方法，但是，我在将 sass 插件添加到现有代码中时遇到了一点问题。目前，我们正在使用 typescript 和 CSS 插件。

const path = require('path')
const withTypescript = require('@zeit/next-typescript')
const withCSS = require('@zeit/next-css')
const withSass = require('@zeit/next-sass');
const configuration = require('./config/configuration.json')

module.exports = withTypescript(
  withCSS(
      webpack(config) 
        if (process.env.ANALYZE) 
          config.plugins.push(new BundleAnalyzerPlugin(
            analyzerMode: 'server',
            analyzerPort: 8888,
            openAnalyzer: true,
          ))
        
        return config
      ,
      cssModules: true,
      serverRuntimeConfig:  
        // Will only be available on the server side
      ,
      publicRuntimeConfig:  
        // Will be available on both server and client
      
    )
  )

我想在实现 sass 的同时添加 sass 插件，但仍然无法处理项目。

【参考方案1】：

这是添加更多插件的方法。

在您的webpack(config) /* ... */ 函数中，您可以继续将更多插件推送到config.plugins。

例如，我在这里添加了配置您的构建脚本的WebpackBar 插件。

webpack(config) 
    if (process.env.ANALYZE) 
        config.plugins.push(new BundleAnalyzerPlugin(
            analyzerMode: 'server',
            analyzerPort: 8888,
            openAnalyzer: true,
        ))
    

    config.plugins.push(new WebpackBar(
        fancy: true,
        profile: true,
        basic: false,
    ));

    // just do as many config.plugins.push() calls as you need

    return config
,