Serverless Vue Webpack 4 Config

webpack.config.js

// ******************************
// Serverless Vue Webpack Config
// ******************************

const Path = require('path')

const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

const { VueLoaderPlugin } = require('vue-loader')

const Webpack = require('webpack')
const WebpackMerge = require('webpack-merge')
const WebpackNodeExternals = require('webpack-node-externals')

const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')

const publicPath = `/public`
const isProduction = process.env.NODE_ENV === 'production'

// ******************************
// Base config
// ******************************

const base = {
  mode: isProduction ? 'production' : 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
          test: /\.(sa|sc|c)ss$/,
          use: isProduction ? [
            {
              loader: MiniCssExtractPlugin.loader,
              options: {
                hmr: process.env.NODE_ENV === 'development',
              },
            },'css-loader','sass-loader',
          ]: [
            'vue-style-loader','css-loader','sass-loader',
         ],
      },
      {
        test: /\.(eot|woff|woff2|ttf)(\?.*)?$/,
        loader: 'file-loader',
        options: {
          name: '[name].[hash:8].[ext]',
          outputPath: './fonts/',
          publicPath: `${publicPath}/fonts/`,
          esModule: false
        }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'file-loader',
        options: {
          name: '[name].[hash:8].[ext]',
          outputPath: './images/',
          publicPath: `${publicPath}/images/`,
          esModule: false
        }
      }
    ]
  },
  output: {
    path: Path.resolve(__dirname, './public/'),
    publicPath: `${publicPath}/`,
    filename: "[name].[hash:8].js"
  },
  plugins: [
    new VueLoaderPlugin(),
    new MiniCssExtractPlugin({
      filename: !isProduction ? '[name].css' : '[name].[hash:8].css',
      chunkFilename: !isProduction ? '[id].css' : '[id].[hash:8].css',
      path: Path.resolve(__dirname, './public/'),
      publicPath: `${publicPath}/`
    }),
  ],
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': Path.resolve(__dirname, './app')
    },
    extensions: ['.js', '.vue']
  }
}

// ****************************************
// Client-Side Webpack Configuration
// ****************************************

const web = WebpackMerge(base, {
  target: 'web',
  devtool: isProduction ? false : 'source-map',
  entry: ['@/config/entry-web.js'],
  plugins: [
    new VueSSRClientPlugin()
  ]
})

// ****************************************
// Server-Side Webpack Configuration
// ****************************************

const server =  WebpackMerge(base, {
  target: 'node',
  entry: ["./app/config/entry-server.js"],
  externals: WebpackNodeExternals({}),
  output: {
    path: Path.resolve(__dirname, './public'),
    publicPath: `${publicPath}/public`,
    libraryTarget: 'commonjs2'
  },
  plugins: [
    new VueSSRServerPlugin()
  ]
})

const serverless =  WebpackMerge(base, {
  target: 'node',
  entry: {
    handler: Path.resolve(__dirname, './handler.js'),
  },
  optimization: {
    minimize: false
  },
  performance: {
    hints: false
  },
  devtool: 'nosources-source-map',
  externals: WebpackNodeExternals(),
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader'
        }],
      }
    ]
  },
  output: {
    libraryTarget: 'commonjs2',
    path: Path.join(__dirname, './.webpack'),
    filename: '[name].js',
    sourceMapFilename: '[file].map'
  }
})

module.exports = [server, web, serverless]