webpack.config.js

   1 const webpack = require("webpack");
   2 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
   3 const nodeExternals = require("webpack-node-externals");
   4 const CopyPlugin = require("copy-webpack-plugin");
   5 const RunNodeWebpackPlugin = require("run-node-webpack-plugin");
   6 const { merge } = require("lodash");
   7
   8 const banner = `
   9   hash:[contentHash], chunkhash:[chunkhash], name:[name], filebase:[base], query:[query], file:[file]
  10   Source code: https://github.com/LemmyNet/lemmy-ui
  11   Created by dessalines
  12   @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
  13   `;
  14
  15 const base = {
  16   output: {
  17     filename: "js/server.js",
  18     publicPath: "/",
  19     hashFunction: "xxhash64",
  20   },
  21   resolve: {
  22     extensions: [".js", ".jsx", ".ts", ".tsx"],
  23   },
  24   performance: {
  25     hints: false,
  26   },
  27   module: {
  28     rules: [
  29       {
  30         test: /\.(scss|css)$/i,
  31         use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
  32       },
  33       {
  34         test: /\.(js|jsx|tsx|ts)$/, // All ts and tsx files will be process by
  35         exclude: /node_modules/, // ignore node_modules
  36         loader: "babel-loader",
  37       },
  38       // Due to some weird babel issue: https://github.com/webpack/webpack/issues/11467
  39       {
  40         test: /\.m?js/,
  41         resolve: {
  42           fullySpecified: false,
  43         },
  44       },
  45     ],
  46   },
  47   plugins: [
  48     new MiniCssExtractPlugin({
  49       filename: "styles/styles.css",
  50     }),
  51     new CopyPlugin({
  52       patterns: [{ from: "./src/assets", to: "./assets" }],
  53     }),
  54     new webpack.BannerPlugin({
  55       banner,
  56     }),
  57   ],
  58 };
  59
  60 const createServerConfig = (_env, mode) => {
  61   const config = merge({}, base, {
  62     mode,
  63     entry: "./src/server/index.tsx",
  64     output: {
  65       filename: "js/server.js",
  66     },
  67     target: "node",
  68     externals: [nodeExternals(), "inferno-helmet"],
  69   });
  70
  71   if (mode === "development") {
  72     config.cache = {
  73       type: "filesystem",
  74       name: "server",
  75     };
  76
  77     config.plugins.push(
  78       new RunNodeWebpackPlugin({
  79         runOnlyInWatchMode: true,
  80       })
  81     );
  82   }
  83
  84   return config;
  85 };
  86 const createClientConfig = (_env, mode) => {
  87   const config = merge({}, base, {
  88     mode,
  89     entry: "./src/client/index.tsx",
  90     output: {
  91       filename: "js/client.js",
  92     },
  93   });
  94
  95   if (mode === "development") {
  96     config.cache = {
  97       type: "filesystem",
  98       name: "client",
  99     };
 100   }
 101
 102   return config;
 103 };
 104
 105 module.exports = (env, properties) => [
 106   createServerConfig(env, properties.mode || "development"),
 107   createClientConfig(env, properties.mode || "development"),
 108 ];