From f061954fdb60d09b07e7e48e7c0c06696f8bafca Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Wed, 21 Jul 2021 16:13:24 -0500 Subject: [PATCH] Webpack: switch build directory to 'static' instead of 'static/packs', fix sw.js --- .gitignore | 6 ++++++ webpack/configuration.js | 21 +++------------------ webpack/development.js | 4 ---- webpack/production.js | 16 +++++++++++----- webpack/rules/file.js | 6 +++--- webpack/shared.js | 20 +++++++++----------- 6 files changed, 32 insertions(+), 41 deletions(-) diff --git a/.gitignore b/.gitignore index 4aa2f5844..61810a909 100644 --- a/.gitignore +++ b/.gitignore @@ -9,8 +9,14 @@ yarn-error.log* /static/packs +/static/packs-test /static/emoji /static/index.html +/static/index.html.gz +/static/manifest.json +/static/manifest.json.gz +/static/report.html +/static/sw.js /static/instance/** !/static/instance/**.example !/static/instance/**.example.* diff --git a/webpack/configuration.js b/webpack/configuration.js index 5aa818993..1c6606103 100644 --- a/webpack/configuration.js +++ b/webpack/configuration.js @@ -11,10 +11,6 @@ const settings = { extensions: [ '.mjs', '.js', '.sass', '.scss', '.css', '.module.sass', '.module.scss', '.module.css', '.png', '.svg', '.gif', '.jpeg', '.jpg' ], }; -function removeOuterSlashes(string) { - return string.replace(/^\/*/, '').replace(/\/*$/, ''); -} - function getPublicOutputPath() { if (env.NODE_ENV === 'test') { return 'packs-test'; @@ -23,25 +19,14 @@ function getPublicOutputPath() { return 'packs'; } -function formatPublicPath(host = '', path = '') { - let formattedHost = removeOuterSlashes(host); - if (formattedHost && !/^http/i.test(formattedHost)) { - formattedHost = `//${formattedHost}`; - } - const formattedPath = removeOuterSlashes(path); - return `${formattedHost}/${formattedPath}/`; +function packsPath(path) { + return join(settings.public_output_path, path); } -const output = { - path: join(__dirname, '..', 'static', settings.public_output_path), - publicPath: formatPublicPath(env.CDN_HOST, settings.public_output_path), -}; - module.exports = { settings, env: { - CDN_HOST: env.CDN_HOST, NODE_ENV: env.NODE_ENV, }, - output, + packsPath, }; diff --git a/webpack/development.js b/webpack/development.js index 2ba8637ac..7af796427 100644 --- a/webpack/development.js +++ b/webpack/development.js @@ -1,10 +1,8 @@ // Note: You must restart bin/webpack-dev-server for changes to take effect console.log('Running in development mode'); // eslint-disable-line no-console -const { resolve } = require('path'); const { merge } = require('webpack-merge'); const sharedConfig = require('./shared'); -const { settings, output } = require('./configuration'); const watchOptions = {}; @@ -72,11 +70,9 @@ module.exports = merge(sharedConfig, { port: 3036, https: false, hot: false, - contentBase: resolve(__dirname, '..', settings.public_root_path), inline: true, useLocalIp: false, public: 'localhost:3036', - publicPath: output.publicPath, historyApiFallback: { disableDotRule: true, }, diff --git a/webpack/production.js b/webpack/production.js index 5908d5da4..20dca9190 100644 --- a/webpack/production.js +++ b/webpack/production.js @@ -6,7 +6,7 @@ const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); const OfflinePlugin = require('offline-plugin'); const TerserPlugin = require('terser-webpack-plugin'); const CompressionPlugin = require('compression-webpack-plugin'); -const { output } = require('./configuration'); + const sharedConfig = require('./shared'); module.exports = merge(sharedConfig, { @@ -44,7 +44,6 @@ module.exports = merge(sharedConfig, { logLevel: 'silent', // do not bother Webpacker, who runs with --json and parses stdout }), new OfflinePlugin({ - publicPath: output.publicPath, // sw.js must be served from the root to avoid scope issues caches: { main: [':rest:'], additional: [':externals:'], @@ -64,6 +63,15 @@ module.exports = merge(sharedConfig, { externals: [ '/emoji/1f602.svg', // used for emoji picker dropdown '/emoji/sheet_13.png', // used in emoji-mart + + // Default emoji reacts + '/emoji/1f44d.svg', // Thumbs up + '/emoji/2764.svg', // Heart + '/emoji/1f606.svg', // Laughing + '/emoji/1f62e.svg', // Surprised + '/emoji/1f622.svg', // Crying + '/emoji/1f629.svg', // Weary + '/emoji/1f621.svg', // Angry (Spinster) ], excludes: [ '**/*.gz', @@ -77,10 +85,8 @@ module.exports = merge(sharedConfig, { '**/*.woff', ], // ServiceWorker: { - // entry: `imports-loader?ATTACHMENT_HOST=>${encodeURIComponent(JSON.stringify(attachmentHost))}!${encodeURI(path.join(__dirname, '../app/soapbox/service_worker/entry.js'))}`, + // entry: join(__dirname, '../app/soapbox/service_worker/entry.js'), // cacheName: 'soapbox', - // output: '../assets/sw.js', - // publicPath: '/sw.js', // minify: true, // }, }), diff --git a/webpack/rules/file.js b/webpack/rules/file.js index f2fb58780..ad4d1da76 100644 --- a/webpack/rules/file.js +++ b/webpack/rules/file.js @@ -1,5 +1,5 @@ const { join } = require('path'); -const { settings } = require('../configuration'); +const { settings, packsPath } = require('../configuration'); module.exports = { test: new RegExp(`(${settings.static_assets_extensions.join('|')})$`, 'i'), @@ -9,9 +9,9 @@ module.exports = { options: { name(file) { if (file.includes(settings.source_path)) { - return 'media/[path][name]-[hash].[ext]'; + return packsPath('media/[path][name]-[hash].[ext]'); } - return 'media/[folder]/[name]-[hash:8].[ext]'; + return packsPath('media/[folder]/[name]-[hash:8].[ext]'); }, context: join(settings.source_path), }, diff --git a/webpack/shared.js b/webpack/shared.js index 540af95f8..0c7857215 100644 --- a/webpack/shared.js +++ b/webpack/shared.js @@ -8,7 +8,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin'); const CopyPlugin = require('copy-webpack-plugin'); const { UnusedFilesWebpackPlugin } = require('unused-files-webpack-plugin'); -const { env, settings, output } = require('./configuration'); +const { env, settings, packsPath } = require('./configuration'); const rules = require('./rules'); module.exports = { @@ -18,11 +18,11 @@ module.exports = { ), output: { - filename: 'js/[name]-[chunkhash].js', - chunkFilename: 'js/[name]-[chunkhash].chunk.js', - hotUpdateChunkFilename: 'js/[id]-[hash].hot-update.js', - path: output.path, - publicPath: output.publicPath, + filename: packsPath('js/[name]-[chunkhash].js'), + chunkFilename: packsPath('js/[name]-[chunkhash].chunk.js'), + hotUpdateChunkFilename: packsPath('js/[id]-[hash].hot-update.js'), + path: join(__dirname, '..', 'static'), + publicPath: '/', }, optimization: { @@ -59,8 +59,8 @@ module.exports = { }, ), new MiniCssExtractPlugin({ - filename: 'css/[name]-[contenthash:8].css', - chunkFilename: 'css/[name]-[contenthash:8].chunk.css', + filename: packsPath('css/[name]-[contenthash:8].css'), + chunkFilename: packsPath('css/[name]-[contenthash:8].chunk.css'), }), new AssetsManifestPlugin({ integrity: false, @@ -90,9 +90,7 @@ module.exports = { useShortDoctype: true, }, }), - new HtmlWebpackHarddiskPlugin({ - outputPath: join(__dirname, '..', 'static'), - }), + new HtmlWebpackHarddiskPlugin(), new CopyPlugin({ patterns: [{ from: join(__dirname, '../node_modules/twemoji/assets/svg'),