webpack对应的SSR配置: webpack.client.config.js

[JCHappytime]

• webpack.server.config.js
• webpack.client.config.js

[JCHappytime]

1.webpack.server.config.js const webpack = require('webpack'); const merge = require('webpack-merge'); const base = require('./webpack.base.config'); const nodeExternals = require('webpack-node-externals'); const VueSSRServerPlugin = require('vue-server-renderer/server-plugin');

module.exports = merge(base, { target: 'node', devtool: '#source-map', entry: './src/entry-server.js', output: { filename: 'server-bundle.js', libraryTarget: 'commonjs2', }, resolve: { alias: { 'create-api': './create-api-server.ts', logger: './logger-server.ts', }, }, // https://webpack.js.org/configuration/externals/#externals // https://github.com/liady/webpack-node-externals externals: nodeExternals({ // do not externalize CSS files in case we need to import it from a dep whitelist: /.css$|vue-echarts/, }), plugins: [ new webpack.DefinePlugin({ 'process.env.VUE_ENV': '"server"', }), new VueSSRServerPlugin(), ], }); 2.webpack.client.config.js const webpack = require('webpack'); const merge = require('webpack-merge'); const base = require('./webpack.base.config'); const VueSSRClientPlugin = require('vue-server-renderer/client-plugin');

const config = merge(base, { entry: { app: './src/entry-client.js', }, resolve: { alias: { 'create-api': './create-api-client.ts', logger: './logger-client.ts', }, }, optimization: { // extract webpack runtime & manifest to avoid vendor chunk hash changing // on every build. runtimeChunk: { name: 'manifest', }, // extract vendor chunks for better caching splitChunks: { chunks: 'initial', cacheGroups: { vendor: { name: 'vendor', test(module) { // a module is extracted into the vendor chunk if... return ( // it's inside node_modules /node_modules/.test(module.context) && // and not a CSS file !/.css$/.test(module.request) ); }, }, }, }, }, plugins: [ new webpack.ProvidePlugin({ $: 'jquery', }), // strip dev-only code in Vue source new webpack.DefinePlugin({ 'process.env.VUE_ENV': '"client"', }), new VueSSRClientPlugin(), ], });

module.exports = config;