X-Git-Url: http://these/git/?a=blobdiff_plain;f=webpack.config.js;h=b12af48334aa7647f79a101451e23af391861e9a;hb=HEAD;hp=4d95a80c1484e30b5bde627261f25f1a3d57923f;hpb=93e015393cfb1371559c045cbaf67af53390c3dc;p=lemmy-ui.git diff --git a/webpack.config.js b/webpack.config.js index 4d95a80..b12af48 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,10 +1,8 @@ const webpack = require("webpack"); -const path = require("path"); +const { resolve } = 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 = ` @@ -14,99 +12,87 @@ const banner = ` @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 `; -const base = { - output: { - filename: "js/server.js", - publicPath: "/", - hashFunction: "xxhash64", - }, - resolve: { - extensions: [".js", ".jsx", ".ts", ".tsx"], - alias: { - "@": path.resolve(__dirname, "src/"), - "@utils": path.resolve(__dirname, "src/shared/utils/"), +module.exports = (env, argv) => { + const mode = argv.mode; + + const base = { + output: { + hashFunction: "xxhash64", }, - }, - performance: { - hints: false, - }, - module: { - rules: [ - { - test: /\.(scss|css)$/i, - 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", + resolve: { + extensions: [".js", ".jsx", ".ts", ".tsx"], + alias: { + "@": resolve(__dirname, "src/"), + "@utils": resolve(__dirname, "src/shared/utils/"), }, - // Due to some weird babel issue: https://github.com/webpack/webpack/issues/11467 - { - test: /\.m?js/, - resolve: { - fullySpecified: false, + }, + performance: { + hints: false, + }, + module: { + rules: [ + { + test: /\.(scss|css)$/i, + 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", + }, + // Due to some weird babel issue: https://github.com/webpack/webpack/issues/11467 + { + test: /\.m?js/, + resolve: { + fullySpecified: false, + }, + }, + ], + }, + plugins: [ + new webpack.DefinePlugin({ + "process.env.COMMIT_HASH": `"${env.COMMIT_HASH}"`, + "process.env.NODE_ENV": `"${mode}"`, + }), + new MiniCssExtractPlugin({ + filename: "styles/styles.css", + }), + new CopyPlugin({ + patterns: [{ from: "./src/assets", to: "./assets" }], + }), + new webpack.BannerPlugin({ + banner, + }), ], - }, - plugins: [ - new MiniCssExtractPlugin({ - filename: "styles/styles.css", - }), - new CopyPlugin({ - patterns: [{ from: "./src/assets", to: "./assets" }], - }), - new webpack.BannerPlugin({ - banner, - }), - ], -}; + }; -const createServerConfig = (_env, mode) => { - const config = merge({}, base, { - mode, + const serverConfig = { + ...base, entry: "./src/server/index.tsx", output: { + ...base.output, filename: "js/server.js", + publicPath: "/", }, target: "node", externals: [nodeExternals(), "inferno-helmet"], - }); - - if (mode === "development") { - // config.cache = { - // type: "filesystem", - // name: "server", - // }; - - config.plugins.push( - new RunNodeWebpackPlugin({ - runOnlyInWatchMode: true, - }) - ); - } - - return config; -}; + }; -const createClientConfig = (_env, mode) => { - const config = merge({}, base, { - mode, + const clientConfig = { + ...base, entry: "./src/client/index.tsx", output: { + ...base.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: { - modifyURLPrefix: { - "/": "/static/", - }, cacheId: "lemmy", - include: [/(assets|styles)\/.+\..+|client\.js$/g], + include: [/(assets|styles|js)\/.+\..+$/g], inlineWorkboxRuntime: true, runtimeCaching: [ { @@ -152,18 +138,22 @@ const createClientConfig = (_env, mode) => { }, }), ], - }); + }; + + if (mode === "development") { + // serverConfig.cache = { + // type: "filesystem", + // name: "server", + // }; - if (mode === "none") { - const BundleAnalyzerPlugin = - require("webpack-bundle-analyzer").BundleAnalyzerPlugin; - config.plugins.push(new BundleAnalyzerPlugin()); + const RunNodeWebpackPlugin = require("run-node-webpack-plugin"); + serverConfig.plugins.push( + new RunNodeWebpackPlugin({ runOnlyInWatchMode: true }) + ); + } else if (mode === "none") { + const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); + serverConfig.plugins.push(new BundleAnalyzerPlugin()); } - return config; + return [serverConfig, clientConfig]; }; - -module.exports = (env, properties) => [ - createServerConfig(env, properties.mode || "development"), - createClientConfig(env, properties.mode || "development"), -];