i have come across a webpack configuration setup 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 attempting to convert this into a next.config.js file but running into 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
what would be the correct way to make this conversion?