我有來自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但出現錯誤：
型別錯誤：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
如何正確轉換？
uj5u.com熱心網友回復：
找到了解決辦法。
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] 棄用警告：設定“監視”選項時，需要向“webpack（選項，回呼）”函式提供“回呼”引數。沒有回呼就無法處理“watch”選項。
但轉換非常有效！
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/526737.html