sforkowany z mirror/soapbox
Merge branch 'webpack-5' into 'develop'
Upgrade to Webpack 5 See merge request soapbox-pub/soapbox-fe!722public-report
Alex Gleason
commit
7fb2ad0a80
|
|
@ -7,6 +7,7 @@
|
|||
const { trim } = require('lodash');
|
||||
|
||||
const {
|
||||
NODE_ENV,
|
||||
BACKEND_URL,
|
||||
FE_SUBDIRECTORY,
|
||||
FE_BUILD_DIR,
|
||||
|
|
@ -33,6 +34,7 @@ const sanitizePath = path => {
|
|||
const sanitize = obj => JSON.parse(JSON.stringify(obj));
|
||||
|
||||
module.exports = sanitize({
|
||||
NODE_ENV: NODE_ENV || 'development',
|
||||
BACKEND_URL: sanitizeURL(BACKEND_URL),
|
||||
FE_SUBDIRECTORY: sanitizeBasename(FE_SUBDIRECTORY),
|
||||
FE_BUILD_DIR: sanitizePath(FE_BUILD_DIR) || 'static',
|
||||
|
|
|
|||
|
|
@ -88,6 +88,14 @@ export const getPointerPosition = (el, event) => {
|
|||
return position;
|
||||
};
|
||||
|
||||
export const fileNameFromURL = str => {
|
||||
const url = new URL(str);
|
||||
const pathname = url.pathname;
|
||||
const index = pathname.lastIndexOf('/');
|
||||
|
||||
return pathname.substring(index + 1);
|
||||
};
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
displayMedia: getSettings(state).get('displayMedia'),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,9 +8,10 @@ import './precheck';
|
|||
import { default as Soapbox } from './containers/soapbox';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import * as OfflinePluginRuntime from '@lcdp/offline-plugin/runtime';
|
||||
import * as perf from './performance';
|
||||
import ready from './ready';
|
||||
|
||||
const perf = require('./performance');
|
||||
import { NODE_ENV } from 'soapbox/build_config';
|
||||
|
||||
function main() {
|
||||
perf.start('main()');
|
||||
|
|
@ -19,9 +20,10 @@ function main() {
|
|||
const mountNode = document.getElementById('soapbox');
|
||||
|
||||
ReactDOM.render(<Soapbox />, mountNode);
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
|
||||
if (NODE_ENV === 'production') {
|
||||
// avoid offline in dev mode because it's harder to debug
|
||||
require('offline-plugin/runtime').install();
|
||||
OfflinePluginRuntime.install();
|
||||
// FIXME: Push notifications are temporarily removed
|
||||
// store.dispatch(registerPushNotifications.register());
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
'use strict';
|
||||
|
||||
import { NODE_ENV } from 'soapbox/build_config';
|
||||
|
||||
//
|
||||
// Tools for performance debugging, only enabled in development mode.
|
||||
// Open up Chrome Dev Tools, then Timeline, then User Timing to see output.
|
||||
|
|
@ -8,7 +10,7 @@
|
|||
|
||||
let marky;
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
if (NODE_ENV === 'development') {
|
||||
if (typeof performance !== 'undefined' && performance.setResourceTimingBufferSize) {
|
||||
// Increase Firefox's performance entry limit; otherwise it's capped to 150.
|
||||
// See: https://bugzilla.mozilla.org/show_bug.cgi?id=1331135
|
||||
|
|
@ -21,13 +23,13 @@ if (process.env.NODE_ENV === 'development') {
|
|||
}
|
||||
|
||||
export function start(name) {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
if (NODE_ENV === 'development') {
|
||||
marky.mark(name);
|
||||
}
|
||||
}
|
||||
|
||||
export function stop(name) {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
if (NODE_ENV === 'development') {
|
||||
marky.stop(name);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react';
|
||||
import { NODE_ENV } from 'soapbox/build_config';
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
if (NODE_ENV === 'development') {
|
||||
const whyDidYouRender = require('@welldone-software/why-did-you-render');
|
||||
whyDidYouRender(React);
|
||||
}
|
||||
|
|
|
|||
56
package.json
56
package.json
|
|
@ -49,6 +49,7 @@
|
|||
"@babel/runtime": "^7.14.6",
|
||||
"@fontsource/montserrat": "^4.5.1",
|
||||
"@fontsource/roboto": "^4.5.0",
|
||||
"@lcdp/offline-plugin": "^5.1.0",
|
||||
"@popperjs/core": "^2.4.4",
|
||||
"@welldone-software/why-did-you-render": "^6.2.0",
|
||||
"array-includes": "^3.0.3",
|
||||
|
|
@ -63,9 +64,10 @@
|
|||
"blurhash": "^1.0.0",
|
||||
"bowser": "^2.11.0",
|
||||
"browserslist": "^4.16.6",
|
||||
"cheerio": "^1.0.0-rc.10",
|
||||
"classnames": "^2.2.5",
|
||||
"compression-webpack-plugin": "^6.0.2",
|
||||
"copy-webpack-plugin": "6.4.0",
|
||||
"compression-webpack-plugin": "^8.0.1",
|
||||
"copy-webpack-plugin": "^9.0.1",
|
||||
"core-js": "^3.15.2",
|
||||
"cryptocurrency-icons": "^0.17.2",
|
||||
"css-loader": "^5.2.6",
|
||||
|
|
@ -74,13 +76,14 @@
|
|||
"dotenv": "^8.0.0",
|
||||
"emoji-datasource": "5.0.0",
|
||||
"emoji-mart": "^3.0.1",
|
||||
"entities": "^3.0.1",
|
||||
"es6-symbol": "^3.1.1",
|
||||
"escape-html": "^1.0.3",
|
||||
"exif-js": "^2.3.0",
|
||||
"file-loader": "^6.0.0",
|
||||
"fork-awesome": "https://github.com/alexgleason/Fork-Awesome#c23fd34246a9f33c4bf24ea095a4cf26e7abe265",
|
||||
"html-webpack-harddisk-plugin": "^1.0.1",
|
||||
"html-webpack-plugin": "^4.3.0",
|
||||
"html-webpack-harddisk-plugin": "^2.0.0",
|
||||
"html-webpack-plugin": "^5.3.2",
|
||||
"http-link-header": "^1.0.2",
|
||||
"immutable": "^4.0.0-rc.12",
|
||||
"imports-loader": "^1.0.0",
|
||||
|
|
@ -88,7 +91,7 @@
|
|||
"intl": "^1.2.5",
|
||||
"intl-messageformat": "^9.0.0",
|
||||
"intl-messageformat-parser": "^6.0.0",
|
||||
"intl-pluralrules": "^1.1.1",
|
||||
"intl-pluralrules": "^1.3.0",
|
||||
"is-nan": "^1.2.1",
|
||||
"jsdoc": "~3.6.7",
|
||||
"lodash": "^4.7.11",
|
||||
|
|
@ -98,10 +101,11 @@
|
|||
"object-assign": "^4.1.1",
|
||||
"object-fit-images": "^3.2.3",
|
||||
"object.values": "^1.1.0",
|
||||
"offline-plugin": "^5.0.7",
|
||||
"path-browserify": "^1.0.1",
|
||||
"postcss": "^8.1.1",
|
||||
"postcss-loader": "^4.0.3",
|
||||
"postcss-object-fit-images": "^1.1.2",
|
||||
"process": "^0.11.10",
|
||||
"prop-types": "^15.5.10",
|
||||
"punycode": "^2.1.0",
|
||||
"qrcode.react": "^1.0.0",
|
||||
|
|
@ -134,37 +138,37 @@
|
|||
"sass": "^1.20.3",
|
||||
"sass-loader": "^10.0.0",
|
||||
"semver": "^7.3.2",
|
||||
"speed-measure-webpack-plugin": "^1.5.0",
|
||||
"stringz": "^2.0.0",
|
||||
"substring-trie": "^1.0.2",
|
||||
"terser-webpack-plugin": "^4.2.3",
|
||||
"terser-webpack-plugin": "^5.2.3",
|
||||
"tiny-queue": "^0.2.1",
|
||||
"ts-jest": "^27.0.3",
|
||||
"ts-jest": "^27.0.5",
|
||||
"tslib": "^2.3.1",
|
||||
"twemoji": "https://github.com/twitter/twemoji#v13.0.2",
|
||||
"typescript": "^4.0.3",
|
||||
"unused-files-webpack-plugin": "^3.4.0",
|
||||
"uuid": "^8.0.0",
|
||||
"webpack": "^4.41.2",
|
||||
"webpack-assets-manifest": "^3.1.1",
|
||||
"webpack-bundle-analyzer": "^4.0.0",
|
||||
"webpack-cli": "^3.3.2",
|
||||
"webpack-merge": "^5.2.0",
|
||||
"util": "^0.12.4",
|
||||
"uuid": "^8.3.2",
|
||||
"webpack": "^5.52.0",
|
||||
"webpack-assets-manifest": "^5.0.6",
|
||||
"webpack-bundle-analyzer": "^4.4.2",
|
||||
"webpack-cli": "^4.8.0",
|
||||
"webpack-merge": "^5.8.0",
|
||||
"websocket.js": "^0.1.12",
|
||||
"wicg-inert": "^3.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"axios-mock-adapter": "^1.18.1",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"babel-jest": "^27.0.6",
|
||||
"enzyme": "^3.8.0",
|
||||
"enzyme-adapter-react-16": "^1.7.1",
|
||||
"babel-jest": "^27.1.0",
|
||||
"enzyme": "^3.11.0",
|
||||
"enzyme-adapter-react-16": "^1.15.6",
|
||||
"eslint": "^7.0.0",
|
||||
"eslint-plugin-import": "~2.22.0",
|
||||
"eslint-plugin-jsx-a11y": "~6.4.0",
|
||||
"eslint-plugin-promise": "~4.2.0",
|
||||
"eslint-plugin-react": "~7.21.0",
|
||||
"eslint-plugin-react-hooks": "^4.0.4",
|
||||
"jest": "^27.0.6",
|
||||
"eslint-plugin-import": "^2.24.2",
|
||||
"eslint-plugin-jsx-a11y": "^6.4.1",
|
||||
"eslint-plugin-promise": "^5.1.0",
|
||||
"eslint-plugin-react": "^7.25.1",
|
||||
"eslint-plugin-react-hooks": "^4.2.0",
|
||||
"jest": "^27.1.0",
|
||||
"raf": "^3.4.1",
|
||||
"react-intl-translations-manager": "^5.0.3",
|
||||
"react-test-renderer": "^16.13.1",
|
||||
|
|
@ -172,7 +176,7 @@
|
|||
"stylelint": "^13.7.2",
|
||||
"stylelint-config-standard": "^20.0.0",
|
||||
"stylelint-scss": "^3.18.0",
|
||||
"webpack-dev-server": "^3.5.1",
|
||||
"webpack-dev-server": "^4.1.0",
|
||||
"yargs": "^16.0.3"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ const settings = {
|
|||
source_path: 'app',
|
||||
public_root_path: FE_BUILD_DIR,
|
||||
test_root_path: `${FE_BUILD_DIR}-test`,
|
||||
cache_path: 'tmp/cache/webpacker',
|
||||
cache_path: 'tmp/cache',
|
||||
resolved_paths: [],
|
||||
static_assets_extensions: [ '.jpg', '.jpeg', '.png', '.tiff', '.ico', '.svg', '.gif', '.eot', '.otf', '.ttf', '.woff', '.woff2', '.mp3', '.ogg', '.oga' ],
|
||||
extensions: [ '.mjs', '.js', '.sass', '.scss', '.css', '.module.sass', '.module.scss', '.module.css', '.png', '.svg', '.gif', '.jpeg', '.jpg' ],
|
||||
|
|
|
|||
|
|
@ -2,11 +2,8 @@
|
|||
console.log('Running in development mode'); // eslint-disable-line no-console
|
||||
|
||||
const { merge } = require('webpack-merge');
|
||||
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
|
||||
const sharedConfig = require('./shared');
|
||||
|
||||
const smp = new SpeedMeasurePlugin();
|
||||
|
||||
const watchOptions = {};
|
||||
|
||||
const backendUrl = process.env.BACKEND_URL || 'http://localhost:4000';
|
||||
|
|
@ -51,12 +48,13 @@ if (process.env.VAGRANT) {
|
|||
watchOptions.poll = 1000;
|
||||
}
|
||||
|
||||
module.exports = smp.wrap(merge(sharedConfig, {
|
||||
module.exports = merge(sharedConfig, {
|
||||
mode: 'development',
|
||||
cache: true,
|
||||
devtool: 'source-map',
|
||||
|
||||
stats: {
|
||||
preset: 'errors-warnings',
|
||||
errorDetails: true,
|
||||
},
|
||||
|
||||
|
|
@ -64,32 +62,30 @@ module.exports = smp.wrap(merge(sharedConfig, {
|
|||
pathinfo: true,
|
||||
},
|
||||
|
||||
watchOptions: Object.assign(
|
||||
{},
|
||||
{ ignored: '**/node_modules/**' },
|
||||
watchOptions,
|
||||
),
|
||||
|
||||
devServer: {
|
||||
clientLogLevel: 'none',
|
||||
compress: true,
|
||||
quiet: false,
|
||||
disableHostCheck: true,
|
||||
host: 'localhost',
|
||||
port: 3036,
|
||||
https: false,
|
||||
hot: false,
|
||||
inline: true,
|
||||
useLocalIp: false,
|
||||
public: 'localhost:3036',
|
||||
historyApiFallback: {
|
||||
disableDotRule: true,
|
||||
},
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
},
|
||||
client: {
|
||||
overlay: true,
|
||||
stats: 'errors-warnings',
|
||||
watchOptions: Object.assign(
|
||||
{},
|
||||
{ ignored: '**/node_modules/**' },
|
||||
watchOptions,
|
||||
),
|
||||
},
|
||||
static: {
|
||||
serveIndex: true,
|
||||
},
|
||||
proxy: makeProxyConfig(),
|
||||
},
|
||||
}));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -3,15 +3,12 @@ console.log('Running in production mode'); // eslint-disable-line no-console
|
|||
|
||||
const { merge } = require('webpack-merge');
|
||||
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
|
||||
const OfflinePlugin = require('offline-plugin');
|
||||
const OfflinePlugin = require('@lcdp/offline-plugin');
|
||||
const TerserPlugin = require('terser-webpack-plugin');
|
||||
const CompressionPlugin = require('compression-webpack-plugin');
|
||||
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
|
||||
const sharedConfig = require('./shared');
|
||||
|
||||
const smp = new SpeedMeasurePlugin();
|
||||
|
||||
module.exports = smp.wrap(merge(sharedConfig, {
|
||||
module.exports = merge(sharedConfig, {
|
||||
mode: 'production',
|
||||
devtool: 'source-map',
|
||||
stats: 'errors-warnings',
|
||||
|
|
@ -19,10 +16,10 @@ module.exports = smp.wrap(merge(sharedConfig, {
|
|||
optimization: {
|
||||
minimize: true,
|
||||
minimizer: [
|
||||
// This doesn't work unless I pass a function... wut
|
||||
compiler => {
|
||||
new TerserPlugin({
|
||||
cache: true,
|
||||
parallel: true,
|
||||
sourceMap: true,
|
||||
|
||||
terserOptions: {
|
||||
warnings: false,
|
||||
|
|
@ -32,7 +29,8 @@ module.exports = smp.wrap(merge(sharedConfig, {
|
|||
comments: false,
|
||||
},
|
||||
},
|
||||
}),
|
||||
}).apply(compiler);
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
|
|
@ -43,10 +41,11 @@ module.exports = smp.wrap(merge(sharedConfig, {
|
|||
'instance',
|
||||
],
|
||||
}),
|
||||
new BundleAnalyzerPlugin({ // generates report.html
|
||||
// Generates report.html
|
||||
new BundleAnalyzerPlugin({
|
||||
analyzerMode: 'static',
|
||||
openAnalyzer: false,
|
||||
logLevel: 'silent', // do not bother Webpacker, who runs with --json and parses stdout
|
||||
logLevel: 'silent',
|
||||
}),
|
||||
new OfflinePlugin({
|
||||
caches: {
|
||||
|
|
@ -99,4 +98,4 @@ module.exports = smp.wrap(merge(sharedConfig, {
|
|||
// },
|
||||
}),
|
||||
],
|
||||
}));
|
||||
});
|
||||
|
|
|
|||
|
|
@ -9,9 +9,9 @@ module.exports = {
|
|||
options: {
|
||||
name(file) {
|
||||
if (file.includes(settings.source_path)) {
|
||||
return 'packs/media/[path][name]-[hash].[ext]';
|
||||
return 'packs/media/[path][name]-[contenthash].[ext]';
|
||||
}
|
||||
return 'packs/media/[folder]/[name]-[hash:8].[ext]';
|
||||
return 'packs/media/[folder]/[name]-[contenthash:8].[ext]';
|
||||
},
|
||||
context: join(settings.source_path),
|
||||
},
|
||||
|
|
|
|||
|
|
@ -7,13 +7,13 @@ const AssetsManifestPlugin = require('webpack-assets-manifest');
|
|||
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 rules = require('./rules');
|
||||
|
||||
const { FE_SUBDIRECTORY } = require(join(__dirname, '..', 'app', 'soapbox', 'build_config'));
|
||||
|
||||
const htmlWebpackPluginConfig = {
|
||||
const makeHtmlConfig = (params = {}) => {
|
||||
return Object.assign({
|
||||
template: 'app/index.ejs',
|
||||
chunksSortMode: 'manual',
|
||||
chunks: ['common', 'locale_en', 'application', 'styles'],
|
||||
|
|
@ -26,6 +26,7 @@ const htmlWebpackPluginConfig = {
|
|||
removeStyleLinkTypeAttributes: true,
|
||||
useShortDoctype: true,
|
||||
},
|
||||
}, params);
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
|
|
@ -37,19 +38,21 @@ module.exports = {
|
|||
output: {
|
||||
filename: 'packs/js/[name]-[chunkhash].js',
|
||||
chunkFilename: 'packs/js/[name]-[chunkhash].chunk.js',
|
||||
hotUpdateChunkFilename: 'packs/js/[id]-[hash].hot-update.js',
|
||||
hotUpdateChunkFilename: 'packs/js/[id]-[contenthash].hot-update.js',
|
||||
path: output.path,
|
||||
publicPath: join(FE_SUBDIRECTORY, '/'),
|
||||
},
|
||||
|
||||
optimization: {
|
||||
chunkIds: 'total-size',
|
||||
moduleIds: 'size',
|
||||
runtimeChunk: {
|
||||
name: 'common',
|
||||
},
|
||||
splitChunks: {
|
||||
cacheGroups: {
|
||||
default: false,
|
||||
vendors: false,
|
||||
defaultVendors: false,
|
||||
common: {
|
||||
name: 'common',
|
||||
chunks: 'all',
|
||||
|
|
@ -59,7 +62,6 @@ module.exports = {
|
|||
},
|
||||
},
|
||||
},
|
||||
occurrenceOrder: true,
|
||||
},
|
||||
|
||||
module: {
|
||||
|
|
@ -68,6 +70,9 @@ module.exports = {
|
|||
|
||||
plugins: [
|
||||
new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
|
||||
new webpack.ProvidePlugin({
|
||||
process: 'process/browser',
|
||||
}),
|
||||
new MiniCssExtractPlugin({
|
||||
filename: 'packs/css/[name]-[contenthash:8].css',
|
||||
chunkFilename: 'packs/css/[name]-[contenthash:8].chunk.css',
|
||||
|
|
@ -78,21 +83,9 @@ module.exports = {
|
|||
writeToDisk: true,
|
||||
publicPath: true,
|
||||
}),
|
||||
// https://www.npmjs.com/package/unused-files-webpack-plugin#options
|
||||
new UnusedFilesWebpackPlugin({
|
||||
patterns: ['app/**/*.*'],
|
||||
globOptions: {
|
||||
ignore: [
|
||||
'node_modules/**/*',
|
||||
'**/__*__/**/*',
|
||||
'app/instance/about.example',
|
||||
'app/soapbox/locales/whitelist_*.json',
|
||||
],
|
||||
},
|
||||
}),
|
||||
// https://github.com/jantimon/html-webpack-plugin#options
|
||||
new HtmlWebpackPlugin(htmlWebpackPluginConfig),
|
||||
new HtmlWebpackPlugin(Object.assign(htmlWebpackPluginConfig, { filename: '404.html' })),
|
||||
new HtmlWebpackPlugin(makeHtmlConfig()),
|
||||
new HtmlWebpackPlugin(makeHtmlConfig({ filename: '404.html' })),
|
||||
new HtmlWebpackHarddiskPlugin(),
|
||||
new CopyPlugin({
|
||||
patterns: [{
|
||||
|
|
@ -120,15 +113,13 @@ module.exports = {
|
|||
resolve(settings.source_path),
|
||||
'node_modules',
|
||||
],
|
||||
fallback: {
|
||||
path: require.resolve('path-browserify'),
|
||||
util: require.resolve('util'),
|
||||
},
|
||||
},
|
||||
|
||||
resolveLoader: {
|
||||
modules: ['node_modules'],
|
||||
},
|
||||
|
||||
node: {
|
||||
// Called by http-link-header in an API we never use, increases
|
||||
// bundle size unnecessarily
|
||||
Buffer: false,
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue