Next to webpack/common.js, create a new server.js file that extends the base configuration:

const merge = require('webpack-merge')
const common = require('./common')
const nodeExternals = require('webpack-node-externals')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')

module.exports = merge(common, {
  entry: './src/entry-server',
  target: 'node',
  devtool: 'source-map',
  output: {
    libraryTarget: 'commonjs2',
  },
  // Skip webpack processing on node_modules
  externals: nodeExternals({
    // Force css files imported from no_modules
    // to be processed by webpack
    whitelist: /.css$/,
  }),
  plugins: [
    // Generates the server bundle file
    new VueSSRServerPlugin(),
  ],
})

Here, we change multiple options, such as the target and output.libraryTarget ones, to adapt to the node.js environment.

Using the webpack-node-externals package, we tell webpack to ignore the modules located in the node_modules folder (which means the dependencies). Since we are in nodejs and not in a browser, we don't have to bundle all the dependencies into the bundle, so this will improve the build times.

Finally, we use VueSSRServerPlugin to generate the server bundle file that will be used by the renderer. It contains the compiled server-side code and a lot of other informations so that the renderer can support source maps (with the source-map value of devtool), hot-reloading, critical CSS injection, and other injections in conjunction with the client manifest data.