将 webpack 配置转换为下一个配置？答案

【问题标题】：convert webpack config to next config?将 webpack 配置转换为下一个配置？
【发布时间】：2022-11-01 15:27:26
【问题描述】：

我有来自https://github.com/shellscape/webpack-plugin-serve/blob/master/recipes/watch-static-content.md 的以下 webpack 配置：

const sane = require('sane');
const { WebpackPluginServe: Serve } = require('webpack-plugin-serve');

const serve = new Serve({ static: ['/app/assets'] });
const watcher = sane('/app/assets', { glob: [ '**/*.md' ] });

serve.on('listening', () => {
  watcher.on('change', (filePath, root, stat) => {
    console.log('file changed', filePath);
  });
});

serve.on('close', () => watcher.close());

module.exports = {
  mode: 'development',
  plugins: [serve],
  watch: true
};

我正在尝试将其转换为 next.config.js 但出现错误：

TypeError：config.push 不是函数

const sane = require('sane')
const { WebpackPluginServe: Serve } = require('webpack-plugin-serve')

const serve = new Serve({ static: ['./styles'] })
const watcher = sane('./styles', { glob: ['**/*.css'] })

serve.on('listening', () => {
  watcher.on('change', (filePath, root, stat) => {
    console.log('file changed', filePath)
  })
})

serve.on('close', () => watcher.close())

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  rewrites: async () => {
    return [
      {
        source: '/',
        destination: '/index.html',
      },
    ]
  },
  webpack: (config, options) => {
    config.plugins.push(serve)
    config.push({
      mode: 'development',
      watch: true,
    })
    return config
  },
}

module.exports = nextConfig

如何正确转换？

【问题讨论】：

如果您使用它的 public 文件夹，Next.js 已经具有此功能，该文件夹用于静态文件服务。
@juliomalves 我正在使用带有普通旧index.html 的顺风，因为我想使用princexml 生成pdf。我必须重新加载index.css 和public/ 文件夹之外的其他css 文件。我使用顺风来做到这一点。我原以为这会自动重新加载它们，所以我得到了 hmr，但它不是那样工作的。相信我，我试过了。我在下面发布了一个解决方案，但 here's the full context if you wanna understand what i want to do 没有用。

标签： javascript node.js webpack next.js webpack-config

【解决方案1】：

找到了解决办法。

const webpack = require('webpack')
const { merge } = require('webpack-merge')
const sane = require('sane')
const { WebpackPluginServe: Serve } = require('webpack-plugin-serve')

const serve = new Serve({ static: ['./styles'] })
const watcher = sane('./styles', { glob: ['**/*.css'] })

serve.on('listening', () => {
  watcher.on('change', (filePath, root, stat) => {
    console.log('file changed', filePath)
  })
})

serve.on('close', () => watcher.close())

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  rewrites: async () => {
    return [
      {
        source: '/',
        destination: '/index.html',
      },
    ]
  },
  webpack: (oldConfig, options) => {
    const plugins = oldConfig.plugins.filter((plugin) => {
      if (
        plugin.constructor &&
        plugin.constructor.name === 'HotModuleReplacementPlugin'
      )
        return false
      return plugin
    })

    oldConfig.plugins = plugins

    const config = {
      mode: 'development',
      watch: true,
      plugins: plugins.concat([serve]),
    }
    return merge(oldConfig, config)
  },
}

module.exports = nextConfig

我现在确实收到不同的错误：

⬢ wps：警告publicPath 的值未在文件系统中指定的任何静态路径中找到

（节点：24455）[DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning：设置“watch”选项时，需要向“webpack（options，callback）”函数提供“callback”参数。没有回调就无法处理“watch”选项。

但转换非常有效！

【讨论】：