i have the following webpack config from https://github.com/shellscape/webpack-plugin-serve/blob/master/recipes/watch-static-content.md:

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
};

i'm trying to convert it into next.config.js but getting an error:

TypeError: config.push is not a function

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

how do I convert properly?

CodePudding user response：

found a solution.

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

i do get different errors for now:

⬢ wps: Warning The value of publicPath was not found on the filesystem in any static paths specified

(node:24455) [DEP_WEBPACK_WATCH_WITHOUT_CALLBACK] DeprecationWarning: A 'callback' argument needs to be provided to the 'webpack(options, callback)' function when the 'watch' option is set. There is no way to handle the 'watch' option without a callback.

but the conversion pretty much works!