fix(ssr): vue-ssr-webpack-plugin compatible with webpack 4/5

close vuejs#11718

Author: ygj6

src/server/template-renderer/index.js

@@ -224,7 +224,7 @@ export default class TemplateRenderer {
     if (this.clientManifest) {
       const initial = this.preloadFiles.filter(({ file }) => isJS(file))
       const async = (this.getUsedAsyncFiles(context) || []).filter(({ file }) => isJS(file))
-      const needed = [initial[0]].concat(async, initial.slice(1))
+      const needed = [].concat(initial[0] ? [initial[0]] : [], async, initial.slice(1));
       return needed.map(({ file }) => {
         return `<script src="${this.publicPath}${file}" defer></script>`
       }).join('')

src/server/webpack-plugin/client.js

@@ -1,6 +1,7 @@
 const hash = require('hash-sum')
 const uniq = require('lodash.uniq')
 import { isJS, isCSS, onEmit } from './util'
+import { isObject } from 'shared/util'
 
 export default class VueSSRClientPlugin {
   constructor (options = {}) {
@@ -19,6 +20,13 @@ export default class VueSSRClientPlugin {
       const initialFiles = uniq(Object.keys(stats.entrypoints)
         .map(name => stats.entrypoints[name].assets)
         .reduce((assets, all) => all.concat(assets), [])
+        .map(file => {
+          if (isObject(file) && file.name) {
+            return file.name;
+          } else {
+            return file;
+          }
+        })
         .filter((file) => isJS(file) || isCSS(file)))
 
       const asyncFiles = allFiles

src/server/webpack-plugin/server.js

@@ -1,4 +1,5 @@
 import { validate, isJS, onEmit } from './util'
+import { isObject } from 'shared/util'
 
 export default class VueSSRServerPlugin {
   constructor (options = {}) {
@@ -20,7 +21,14 @@ export default class VueSSRServerPlugin {
         return cb()
       }
 
-      const entryAssets = entryInfo.assets.filter(isJS)
+      const entryAssets = entryInfo.assets
+        .map(file => {
+          if ( isObject(file) && file.name) {
+            return file.name;
+          } else {
+            return file;
+          }
+        }).filter(isJS)
 
       if (entryAssets.length > 1) {
         throw new Error(
@@ -45,6 +53,9 @@ export default class VueSSRServerPlugin {
       stats.assets.forEach(asset => {
         if (isJS(asset.name)) {
           bundle.files[asset.name] = compilation.assets[asset.name].source()
+          if (asset.info && asset.info.related && asset.info.related.sourceMap) {
+            bundle.maps[asset.info.related.sourceMap.replace(/\.map$/, '')] = JSON.parse(compilation.assets[asset.info.related.sourceMap].source());
+          }
         } else if (asset.name.match(/\.js\.map$/)) {
           bundle.maps[asset.name.replace(/\.map$/, '')] = JSON.parse(compilation.assets[asset.name].source())
         }

src/server/webpack-plugin/util.js

@@ -9,8 +9,15 @@ export const validate = compiler => {
     warn('webpack config `target` should be "node".')
   }
 
-  if (compiler.options.output && compiler.options.output.libraryTarget !== 'commonjs2') {
-    warn('webpack config `output.libraryTarget` should be "commonjs2".')
+  if (compiler.options.output) {
+    // Webpack < 5.0.0
+    if (compiler.options.output.libraryTarget && compiler.options.output.libraryTarget !== 'commonjs2') {
+      warn('webpack config `output.libraryTarget` should be "commonjs2".')
+    }
+    // Webpack >= 5.0.0
+    else if (compiler.options.output.library && compiler.options.output.library.type !== 'commonjs2') {
+      warn('webpack config `output.libraryTarget` should be "commonjs2".')
+    }
   }
 
   if (!compiler.options.externals) {