我可以使用 webpack 捆绑 Next.js 自定义服务器吗？答案

【问题标题】：Can I use webpack to bundle a Next.js custom server?我可以使用 webpack 捆绑 Next.js 自定义服务器吗？
【发布时间】：2021-08-10 17:57:12
【问题描述】：

当您使用 Next.js 实现自定义服务器时，它是 isn't bundled in the production build。我的问题是（在我尝试之前），可以使用custom webpack config 来捆绑它吗？

我想要这样做的原因是我不想在生产版本中发布代码。

编辑：我正在使用 Next.js 7.0.2 和 Webpack 4.20.2，它被使用。所以this 是为该版本定制 webpack 配置的正确链接。

【问题讨论】：

嘿，当您说自定义服务器“未捆绑在产品构建中”时，您的意思是它不能部署到 Vercel 吗？我问是因为“捆绑”通常是指转换发送给客户端的代码。
你能澄清一下“我不想在生产版本中发布代码”的意思吗？可以举个例子吗？
“未捆绑在产品构建中”是指当您运行下一个构建时，后端 Express 代码不会被 webpack 捆绑到 .next 文件夹中。 “我不想在生产版本中发布代码”，我的意思是我也想将服务器端代码与 webpack 捆绑在一起，因为我们需要将包含应用程序的 docker 映像传递给第三方。
您可以编写一个简短的脚本，在构建完成后将服务器代码移动到 .next 文件夹中。然后将其添加到您的 package.json 中，例如 build: next export && copy_server.sh

标签： webpack next.js

【解决方案1】：

好的，经过试验，事实证明您可以在现有的 Next.js webpack 配置中添加另一个条目，但由于自定义服务器需要不同的设置，实际上最好单独进行。我现在有一个build-server 脚本，它将自定义服务器捆绑到一个名为.server 的文件夹中。我还为它和 Next.js webpack 配置添加了混淆。

这是我的next-config.js：

const withCSS = require('@zeit/next-css')
const WebpackObfuscator = require('webpack-obfuscator')

module.exports = withCSS({
    poweredByHeader: false,
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
        if (process.env.NODE_ENV === 'production') {
            // Extend default config with obfuscation
            config.plugins.push(
                new WebpackObfuscator ({
                    rotateStringArray: true
                })
            )
        }

        // Important: return the modified config
        return config
    }
})

这是我的webpack.config.server.js：

const path = require('path')
const nodeExternals = require('webpack-node-externals')
const WebpackObfuscator = require('webpack-obfuscator')

// Config to build Express server and associated server-side code bundle
module.exports = {
    mode: 'production',
    target: 'node',
    entry: './server/server.js',
    externals: [nodeExternals()], // Ignore node_modules
    output: {
        path: path.resolve(__dirname, '.server'),
        filename: 'server.bundle.js',
    },
    plugins: [
        // Obfuscate the code
        new WebpackObfuscator ({
            rotateStringArray: true
        })
    ]
}

build-server 脚本是：

"build-server": "webpack --config ./webpack.config.server.js"

【讨论】：

您能分享一下您的发现吗？
道歉 - 我完全忘了这样做。答案已更新。