SSR guide: refactor to a webpack build w/o Vue CLI

[NataliaTepluhina]

A suggestion by @CyberAP

---

Maybe it's worth exploring into the vue-cli agnostic SSR idea? Because right now if you're not using vue-cli your first migration step would be to migrate your current build config to vue-cli and only then apply all the SSR practices in the guide.

---

Also, within this refactoring it would be nice to split webpack config onto base one, server and client builds like it was done in Vue 2 SSR guilde

[CyberAP]

Base config examples:

Client

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: './src/entry-client.js',
  output: {
    path: path.resolve(__dirname, './dist/client'),
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
  ],
};

Server

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const nodeExternals = require('webpack-node-externals');
const webpack = require('webpack');

module.exports = {
  entry: './src/entry-server.js',
  target: 'node',
  output: {
    libraryTarget: 'commonjs2',
    path: path.resolve(__dirname, './dist/server'),
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
      },
      {
        test: /\.css$/,
        use: 'null-loader',
      },
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new WebpackManifestPlugin({ fileName: 'ssr-manifest.json' }),
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1
    }),
  ],
  optimization: {
    splitChunks: false,
    minimize: false,
  },
  externals: nodeExternals({ allowlist: /\.(css|vue)$/ }),
};

I am not 100% sure about the null-loader practice that I added here for performance reasons, maybe there's a better one but right now it seems to be a reasonable choice to get fast builds for node environment (maybe css-loader can do this out of the box, can't verify).

Update: I can verify that null-loader works great for server build.

[HomyeeKing]

build:serer error w/ the given vue-cli config ，
here is the debug log:

but my global npm version is :

[skirtles-code]

@HomyeeKing I can't really tell what problem you're having from those pictures. It doesn't seem to be related to this GitHub issue, which is about documenting a non-CLI webpack config for SSR.

I suggest asking for help on the Vue Discord if you need help debugging the problem.

If it turns out to be an error in the documentation then please open a new issue.

[HomyeeKing]

just a auto-fixed bug, it works today w/ no extra config
you can fold my comment