X-Git-Url: http://these/git/?a=blobdiff_plain;f=webpack.config.js;h=a67ed2ecf12d30ace63cab0975f1a60960860f69;hb=e80bcf53acb8ce25ed5ef6b7eb16b90f0b07e8f1;hp=1b3470507a3bc061e13b7b9695e53223d76209c1;hpb=1e468ab671e7810f0eb48d88528c0f0ea210e8d8;p=lemmy-ui.git diff --git a/webpack.config.js b/webpack.config.js index 1b34705..a67ed2e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,8 +1,11 @@ -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const nodeExternals = require('webpack-node-externals'); -const CopyPlugin = require('copy-webpack-plugin'); -const path = require('path'); -const webpack = require('webpack'); +const webpack = require("webpack"); +const path = require("path"); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const nodeExternals = require("webpack-node-externals"); +const CopyPlugin = require("copy-webpack-plugin"); +const RunNodeWebpackPlugin = require("run-node-webpack-plugin"); +const merge = require("lodash.merge"); +const { ServiceWorkerPlugin } = require("service-worker-webpack"); const banner = ` hash:[contentHash], chunkhash:[chunkhash], name:[name], filebase:[base], query:[query], file:[file] @@ -11,16 +14,19 @@ const banner = ` @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 `; -module.exports = function (env, _) { - const base = { - // mode is set by package.json flags - entry: './src/server/index.tsx', // Point to main file +function getBase(env, mode) { + return { output: { - filename: 'js/server.js', - publicPath: '/', + filename: "js/server.js", + publicPath: "/", + hashFunction: "xxhash64", }, resolve: { - extensions: ['.js', '.jsx', '.ts', '.tsx'], + extensions: [".js", ".jsx", ".ts", ".tsx"], + alias: { + "@": path.resolve(__dirname, "src/"), + "@utils": path.resolve(__dirname, "src/shared/utils/"), + }, }, performance: { hints: false, @@ -29,12 +35,12 @@ module.exports = function (env, _) { rules: [ { test: /\.(scss|css)$/i, - use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'], + use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"], }, { test: /\.(js|jsx|tsx|ts)$/, // All ts and tsx files will be process by exclude: /node_modules/, // ignore node_modules - loader: 'babel-loader', + loader: "babel-loader", }, // Due to some weird babel issue: https://github.com/webpack/webpack/issues/11467 { @@ -45,33 +51,125 @@ module.exports = function (env, _) { }, ], }, - devServer: { - host: '0.0.0.0', - contentBase: 'src/', - historyApiFallback: true, - }, plugins: [ + new webpack.DefinePlugin({ + "process.env.COMMIT_HASH": `"${env.COMMIT_HASH}"`, + "process.env.NODE_ENV": `"${mode}"`, + }), new MiniCssExtractPlugin({ - filename: 'styles/styles.css', + filename: "styles/styles.css", }), new CopyPlugin({ - patterns: [{ from: './src/assets', to: './assets' }], + patterns: [{ from: "./src/assets", to: "./assets" }], }), new webpack.BannerPlugin({ banner, }), ], }; +} + +const createServerConfig = (env, mode) => { + const base = getBase(env, mode); + const config = merge({}, base, { + mode, + entry: "./src/server/index.tsx", + output: { + filename: "js/server.js", + }, + target: "node", + externals: [nodeExternals(), "inferno-helmet"], + }); - // server-specific configuration - if (env.platform === 'server') { - base.target = 'node'; - base.externals = [nodeExternals(), 'inferno-helmet']; + if (mode === "development") { + // config.cache = { + // type: "filesystem", + // name: "server", + // }; + + config.plugins.push( + new RunNodeWebpackPlugin({ + runOnlyInWatchMode: true, + }) + ); } - // client-specific configurations - if (env.platform === 'client') { - base.entry = './src/client/index.tsx'; - base.output.filename = 'js/client.js'; + + return config; +}; + +const createClientConfig = (env, mode) => { + const base = getBase(env, mode); + const config = merge({}, base, { + mode, + entry: "./src/client/index.tsx", + output: { + filename: "js/client.js", + publicPath: `/static/${env.COMMIT_HASH}/`, + }, + plugins: [ + ...base.plugins, + new ServiceWorkerPlugin({ + enableInDevelopment: mode !== "development", // this may seem counterintuitive, but it is correct + workbox: { + cacheId: "lemmy", + include: [/(assets|styles|js)\/.+\..+$/g], + inlineWorkboxRuntime: true, + runtimeCaching: [ + { + urlPattern: ({ + sameOrigin, + url: { pathname, host }, + request: { method }, + }) => + (sameOrigin || host.includes("localhost")) && + (!( + pathname.includes("pictrs") || pathname.includes("static") + ) || + method === "POST"), + handler: "NetworkFirst", + options: { + cacheName: "instance-cache", + }, + }, + { + urlPattern: ({ url: { pathname, host }, sameOrigin }) => + (sameOrigin || host.includes("localhost")) && + pathname.includes("static"), + handler: mode === "development" ? "NetworkFirst" : "CacheFirst", + options: { + cacheName: "static-cache", + expiration: { + maxAgeSeconds: 60 * 60 * 24, + }, + }, + }, + { + urlPattern: ({ url: { pathname }, request: { method } }) => + pathname.includes("pictrs") && method === "GET", + handler: "StaleWhileRevalidate", + options: { + cacheName: "image-cache", + expiration: { + maxAgeSeconds: 60 * 60 * 24, + }, + }, + }, + ], + }, + }), + ], + }); + + if (mode === "none") { + const BundleAnalyzerPlugin = + require("webpack-bundle-analyzer").BundleAnalyzerPlugin; + config.plugins.push(new BundleAnalyzerPlugin()); } - return base; + + return config; }; + +module.exports = (env, properties) => [ + createServerConfig(env, properties.mode || "development"), + createClientConfig(env, properties.mode || "development"), +];