forked from ppfun/pixelplanet
Upgrade npm packages, adjust webpack config
This commit is contained in:
parent
7c3a396e3d
commit
141ca00fc3
6
.babelrc
6
.babelrc
|
@ -19,6 +19,10 @@
|
||||||
"@babel/plugin-proposal-numeric-separator",
|
"@babel/plugin-proposal-numeric-separator",
|
||||||
"@babel/plugin-proposal-throw-expressions",
|
"@babel/plugin-proposal-throw-expressions",
|
||||||
["@babel/plugin-proposal-class-properties", { "loose": true }],
|
["@babel/plugin-proposal-class-properties", { "loose": true }],
|
||||||
"@babel/proposal-object-rest-spread"
|
"@babel/proposal-object-rest-spread",
|
||||||
|
"@babel/transform-react-constant-elements",
|
||||||
|
"@babel/transform-react-inline-elements",
|
||||||
|
"transform-react-remove-prop-types",
|
||||||
|
"transform-react-pure-class-to-function",
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
4952
package-lock.json
generated
4952
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
77
package.json
77
package.json
|
@ -25,14 +25,14 @@
|
||||||
"not IE_Mob 11"
|
"not IE_Mob 11"
|
||||||
],
|
],
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bcrypt": "^4.0.1",
|
"bcrypt": "^5.0.0",
|
||||||
"bluebird": "^3.5.0",
|
"bluebird": "^3.5.0",
|
||||||
"body-parser": "^1.17.2",
|
"body-parser": "^1.17.2",
|
||||||
"bufferutil": "^4.0.1",
|
"bufferutil": "^4.0.1",
|
||||||
"compression": "^1.7.3",
|
"compression": "^1.7.3",
|
||||||
"connect-redis": "^4.0.4",
|
"connect-redis": "^5.0.0",
|
||||||
"cookie-parser": "^1.4.5",
|
"cookie-parser": "^1.4.5",
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.8.0",
|
||||||
"cors": "^2.8.4",
|
"cors": "^2.8.4",
|
||||||
"etag": "^1.8.1",
|
"etag": "^1.8.1",
|
||||||
"express": "^4.15.3",
|
"express": "^4.15.3",
|
||||||
|
@ -41,29 +41,28 @@
|
||||||
"global": "^4.3.2",
|
"global": "^4.3.2",
|
||||||
"http-proxy-agent": "^4.0.1",
|
"http-proxy-agent": "^4.0.1",
|
||||||
"image-q": "^2.1.2",
|
"image-q": "^2.1.2",
|
||||||
"ip-address": "^6.4.0",
|
"ip-address": "^7.1.0",
|
||||||
"isomorphic-fetch": "^2.2.1",
|
"isomorphic-fetch": "^3.0.0",
|
||||||
"js-file-download": "^0.4.12",
|
"js-file-download": "^0.4.12",
|
||||||
"keycode": "^2.1.9",
|
"keycode": "^2.1.9",
|
||||||
"localforage": "^1.9.0",
|
"localforage": "^1.9.0",
|
||||||
"morgan": "^1.10.0",
|
"morgan": "^1.10.0",
|
||||||
"multer": "^1.4.1",
|
"multer": "^1.4.1",
|
||||||
"mysql2": "^2.2.5",
|
"mysql2": "^2.2.5",
|
||||||
"node-sass": "^4.14.1",
|
"nodemailer": "^6.4.16",
|
||||||
"nodemailer": "^6.4.11",
|
|
||||||
"passport": "^0.4.0",
|
"passport": "^0.4.0",
|
||||||
"passport-discord": "^0.1.4",
|
"passport-discord": "^0.1.4",
|
||||||
"passport-facebook": "^3.0.0",
|
"passport-facebook": "^3.0.0",
|
||||||
"passport-google-oauth": "^2.0.0",
|
"passport-google-oauth": "^2.0.0",
|
||||||
"passport-json": "^1.2.0",
|
"passport-json": "^1.2.0",
|
||||||
"passport-reddit": "^0.2.4",
|
"passport-reddit": "^0.2.4",
|
||||||
"passport-vkontakte": "^0.3.3",
|
"passport-vkontakte": "^0.5.0",
|
||||||
"react": "^16.13.1",
|
"react": "^17.0.1",
|
||||||
"react-dom": "^16.13.1",
|
"react-dom": "^17.0.1",
|
||||||
"react-icons": "^3.11.0",
|
"react-icons": "^4.1.0",
|
||||||
"react-modal": "^3.11.2",
|
"react-modal": "^3.12.1",
|
||||||
"react-redux": "^7.2.1",
|
"react-redux": "^7.2.1",
|
||||||
"react-responsive": "^8.1.0",
|
"react-responsive": "^8.2.0",
|
||||||
"react-stay-scrolled": "^7.1.0",
|
"react-stay-scrolled": "^7.1.0",
|
||||||
"react-toggle-button": "^2.1.0",
|
"react-toggle-button": "^2.1.0",
|
||||||
"redis": "^3.0.2",
|
"redis": "^3.0.2",
|
||||||
|
@ -72,19 +71,19 @@
|
||||||
"redux-logger": "^3.0.6",
|
"redux-logger": "^3.0.6",
|
||||||
"redux-persist": "^6.0.0",
|
"redux-persist": "^6.0.0",
|
||||||
"redux-thunk": "^2.2.0",
|
"redux-thunk": "^2.2.0",
|
||||||
"sequelize": "^5.21.7",
|
"sequelize": "^6.3.5",
|
||||||
"sharp": "^0.26.1",
|
"sharp": "^0.26.3",
|
||||||
"startaudiocontext": "^1.2.1",
|
"startaudiocontext": "^1.2.1",
|
||||||
"sweetalert2": "^9.10.12",
|
"sweetalert2": "^10.10.4",
|
||||||
"three": "^0.120.1",
|
"three": "^0.123.0",
|
||||||
"three-trackballcontrols-ts": "^0.2.2",
|
"three-trackballcontrols": "^0.9.0",
|
||||||
"url-search-params-polyfill": "^8.1.0",
|
"url-search-params-polyfill": "^8.1.0",
|
||||||
"winston": "^3.3.3",
|
"winston": "^3.3.3",
|
||||||
"winston-daily-rotate-file": "^4.5.0",
|
"winston-daily-rotate-file": "^4.5.0",
|
||||||
"ws": "^7.3.1"
|
"ws": "^7.4.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.11.6",
|
"@babel/core": "^7.12.9",
|
||||||
"@babel/node": "^7.10.5",
|
"@babel/node": "^7.10.5",
|
||||||
"@babel/plugin-proposal-class-properties": "^7.10.4",
|
"@babel/plugin-proposal-class-properties": "^7.10.4",
|
||||||
"@babel/plugin-proposal-decorators": "^7.10.5",
|
"@babel/plugin-proposal-decorators": "^7.10.5",
|
||||||
|
@ -96,9 +95,9 @@
|
||||||
"@babel/plugin-proposal-json-strings": "^7.10.4",
|
"@babel/plugin-proposal-json-strings": "^7.10.4",
|
||||||
"@babel/plugin-proposal-logical-assignment-operators": "^7.11.0",
|
"@babel/plugin-proposal-logical-assignment-operators": "^7.11.0",
|
||||||
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
|
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
|
||||||
"@babel/plugin-proposal-numeric-separator": "^7.10.4",
|
"@babel/plugin-proposal-numeric-separator": "^7.12.7",
|
||||||
"@babel/plugin-proposal-object-rest-spread": "^7.11.0",
|
"@babel/plugin-proposal-object-rest-spread": "^7.11.0",
|
||||||
"@babel/plugin-proposal-optional-chaining": "^7.11.0",
|
"@babel/plugin-proposal-optional-chaining": "^7.12.7",
|
||||||
"@babel/plugin-proposal-pipeline-operator": "^7.10.5",
|
"@babel/plugin-proposal-pipeline-operator": "^7.10.5",
|
||||||
"@babel/plugin-proposal-throw-expressions": "^7.10.4",
|
"@babel/plugin-proposal-throw-expressions": "^7.10.4",
|
||||||
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
||||||
|
@ -107,37 +106,37 @@
|
||||||
"@babel/plugin-transform-react-constant-elements": "^7.10.4",
|
"@babel/plugin-transform-react-constant-elements": "^7.10.4",
|
||||||
"@babel/plugin-transform-react-inline-elements": "^7.10.4",
|
"@babel/plugin-transform-react-inline-elements": "^7.10.4",
|
||||||
"@babel/polyfill": "^7.11.5",
|
"@babel/polyfill": "^7.11.5",
|
||||||
"@babel/preset-env": "^7.11.5",
|
"@babel/preset-env": "^7.12.7",
|
||||||
"@babel/preset-flow": "^7.10.4",
|
"@babel/preset-flow": "^7.10.4",
|
||||||
"@babel/preset-react": "^7.10.4",
|
"@babel/preset-react": "^7.12.7",
|
||||||
"@babel/preset-typescript": "^7.10.4",
|
"@babel/preset-typescript": "^7.12.7",
|
||||||
"assets-webpack-plugin": "^3.9.12",
|
"assets-webpack-plugin": "^6.0.5",
|
||||||
"babel-eslint": "^10.1.0",
|
"babel-eslint": "^10.1.0",
|
||||||
"babel-loader": "^8.1.0",
|
"babel-loader": "^8.2.2",
|
||||||
"babel-plugin-transform-react-pure-class-to-function": "^1.0.1",
|
"babel-plugin-transform-react-pure-class-to-function": "^1.0.1",
|
||||||
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
|
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
|
||||||
"clean-css": "^4.2.3",
|
"clean-css": "^4.2.3",
|
||||||
"css-loader": "^3.5.3",
|
"css-loader": "^5.0.1",
|
||||||
"eslint": "^6.8.0",
|
"eslint": "^7.14.0",
|
||||||
"eslint-config-airbnb": "^18.2.0",
|
"eslint-config-airbnb": "^18.2.1",
|
||||||
"eslint-config-airbnb-base": "^14.2.0",
|
"eslint-config-airbnb-base": "^14.2.1",
|
||||||
"eslint-plugin-flowtype": "^4.7.0",
|
"eslint-plugin-flowtype": "^5.2.0",
|
||||||
"eslint-plugin-import": "^2.22.1",
|
"eslint-plugin-import": "^2.22.1",
|
||||||
"eslint-plugin-jsx-a11y": "^6.3.1",
|
"eslint-plugin-jsx-a11y": "^6.3.1",
|
||||||
"eslint-plugin-react": "^7.21.2",
|
"eslint-plugin-react": "^7.21.2",
|
||||||
"flow-bin": "^0.134.0",
|
"flow-bin": "^0.138.0",
|
||||||
"generate-package-json-webpack-plugin": "^1.1.2",
|
"generate-package-json-webpack-plugin": "^2.1.1",
|
||||||
"json-loader": "^0.5.4",
|
"json-loader": "^0.5.4",
|
||||||
"npm-check": "^5.9.2",
|
"npm-check": "^5.9.2",
|
||||||
"react-hot-loader": "^4.13.0",
|
"react-hot-loader": "^4.13.0",
|
||||||
"react-svg-loader": "^3.0.3",
|
"react-svg-loader": "^3.0.3",
|
||||||
"rimraf": "^3.0.2",
|
"rimraf": "^3.0.2",
|
||||||
"sass-loader": "^8.0.2",
|
"style-loader": "^2.0.0",
|
||||||
"style-loader": "^1.2.1",
|
"webpack": "^5.9.0",
|
||||||
"webpack": "^4.44.2",
|
"webpack-bundle-analyzer": "^4.2.0",
|
||||||
"webpack-bundle-analyzer": "^3.9.0",
|
"webpack-dev-middleware": "^4.0.2",
|
||||||
"webpack-dev-middleware": "^3.7.1",
|
|
||||||
"webpack-hot-middleware": "^2.18.0",
|
"webpack-hot-middleware": "^2.18.0",
|
||||||
|
"webpack-node-externals": "^2.5.2",
|
||||||
"write-file-webpack-plugin": "^4.0.2"
|
"write-file-webpack-plugin": "^4.0.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import * as THREE from 'three';
|
import * as THREE from 'three';
|
||||||
|
|
||||||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
|
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
|
||||||
import { TrackballControls } from 'three-trackballcontrols-ts';
|
import TrackballControls from 'three-trackballcontrols';
|
||||||
|
|
||||||
|
|
||||||
function checkMaterial(object) {
|
function checkMaterial(object) {
|
||||||
|
|
|
@ -2,7 +2,6 @@
|
||||||
|
|
||||||
import { applyMiddleware, createStore, compose } from 'redux';
|
import { applyMiddleware, createStore, compose } from 'redux';
|
||||||
import thunk from 'redux-thunk';
|
import thunk from 'redux-thunk';
|
||||||
import { createLogger } from 'redux-logger';
|
|
||||||
import { persistStore } from 'redux-persist';
|
import { persistStore } from 'redux-persist';
|
||||||
|
|
||||||
import audio from './audio';
|
import audio from './audio';
|
||||||
|
@ -18,14 +17,6 @@ import extensions from './extensions';
|
||||||
import reducers from '../reducers';
|
import reducers from '../reducers';
|
||||||
|
|
||||||
|
|
||||||
const isDebuggingInChrome = __DEV__ && !!window.navigator.userAgent;
|
|
||||||
|
|
||||||
const logger = createLogger({
|
|
||||||
predicate: () => isDebuggingInChrome,
|
|
||||||
collapsed: true,
|
|
||||||
duration: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
const store = createStore(
|
const store = createStore(
|
||||||
reducers,
|
reducers,
|
||||||
undefined,
|
undefined,
|
||||||
|
@ -41,7 +32,6 @@ const store = createStore(
|
||||||
protocolClientHook,
|
protocolClientHook,
|
||||||
rendererHook,
|
rendererHook,
|
||||||
extensions,
|
extensions,
|
||||||
logger,
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
|
@ -9,7 +9,20 @@
|
||||||
|
|
||||||
import fs from 'fs';
|
import fs from 'fs';
|
||||||
import webpack from 'webpack';
|
import webpack from 'webpack';
|
||||||
import webpackConfig from './webpack.config';
|
import webpackConfigWeb from './webpack.config.web';
|
||||||
|
import webpackConfigClient from './webpack.config.client';
|
||||||
|
|
||||||
|
const wpStats = {
|
||||||
|
colors: true,
|
||||||
|
reasons: false,
|
||||||
|
hash: false,
|
||||||
|
version: false,
|
||||||
|
timings: true,
|
||||||
|
chunks: true,
|
||||||
|
chunkModules: false,
|
||||||
|
cached: false,
|
||||||
|
cachedAssets: false,
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Creates application bundles from the source files.
|
* Creates application bundles from the source files.
|
||||||
|
@ -20,7 +33,7 @@ function bundle() {
|
||||||
* Pretty dirty, but we did write an issue and they might
|
* Pretty dirty, but we did write an issue and they might
|
||||||
* update one day
|
* update one day
|
||||||
*/
|
*/
|
||||||
console.log('Pathing image-q set-immediate import');
|
console.log('Patching image-q set-immediate import');
|
||||||
const regex = /core-js\/fn\/set-immediate/g;
|
const regex = /core-js\/fn\/set-immediate/g;
|
||||||
const files = [
|
const files = [
|
||||||
'./node_modules/image-q/dist/esm/basicAPI.js',
|
'./node_modules/image-q/dist/esm/basicAPI.js',
|
||||||
|
@ -31,17 +44,18 @@ function bundle() {
|
||||||
fileContent = fileContent.replace(regex, 'core-js/features/set-immediate');
|
fileContent = fileContent.replace(regex, 'core-js/features/set-immediate');
|
||||||
fs.writeFileSync(file, fileContent);
|
fs.writeFileSync(file, fileContent);
|
||||||
});
|
});
|
||||||
console.log('Pathing image-q done');
|
console.log('Patching image-q done');
|
||||||
} catch {
|
} catch {
|
||||||
console.log('Error while patching image-q');
|
console.log('Error while patching image-q');
|
||||||
}
|
}
|
||||||
|
console.log('Bundle with webpack....');
|
||||||
|
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
webpack(webpackConfig).run((err, stats) => {
|
webpack([webpackConfigWeb, webpackConfigClient]).run((err, stats) => {
|
||||||
if (err) {
|
if (err) {
|
||||||
return reject(err);
|
return reject(err);
|
||||||
}
|
}
|
||||||
|
console.log(stats.toString(wpStats));
|
||||||
console.log(stats.toString(webpackConfig[0].stats));
|
|
||||||
return resolve();
|
return resolve();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
173
tools/webpack.config.client.js
Normal file
173
tools/webpack.config.client.js
Normal file
|
@ -0,0 +1,173 @@
|
||||||
|
/**
|
||||||
|
*/
|
||||||
|
|
||||||
|
import path from 'path';
|
||||||
|
import webpack from 'webpack';
|
||||||
|
import AssetsPlugin from 'assets-webpack-plugin';
|
||||||
|
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
|
||||||
|
|
||||||
|
import pkg from '../package.json';
|
||||||
|
|
||||||
|
const isDebug = process.argv.includes('--debug');
|
||||||
|
const isVerbose = process.argv.includes('--verbose');
|
||||||
|
const isAnalyze = process.argv.includes('--analyze')
|
||||||
|
|| process.argv.includes('--analyse');
|
||||||
|
|
||||||
|
|
||||||
|
const babelPlugins = [
|
||||||
|
'@babel/transform-flow-strip-types',
|
||||||
|
['@babel/plugin-proposal-decorators', { legacy: true }],
|
||||||
|
'@babel/plugin-proposal-function-sent',
|
||||||
|
'@babel/plugin-proposal-export-namespace-from',
|
||||||
|
'@babel/plugin-proposal-numeric-separator',
|
||||||
|
'@babel/plugin-proposal-throw-expressions',
|
||||||
|
['@babel/plugin-proposal-class-properties', { loose: true }],
|
||||||
|
'@babel/proposal-object-rest-spread',
|
||||||
|
// react-optimize
|
||||||
|
'@babel/transform-react-constant-elements',
|
||||||
|
'@babel/transform-react-inline-elements',
|
||||||
|
'transform-react-remove-prop-types',
|
||||||
|
'transform-react-pure-class-to-function',
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'client',
|
||||||
|
target: 'web',
|
||||||
|
|
||||||
|
context: path.resolve(__dirname, '..'),
|
||||||
|
mode: (isDebug) ? 'development' : 'production',
|
||||||
|
devtool: 'source-map',
|
||||||
|
|
||||||
|
entry: {
|
||||||
|
client: ['./src/client.js'],
|
||||||
|
globe: ['./src/globe.js'],
|
||||||
|
},
|
||||||
|
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, '../build/public/assets'),
|
||||||
|
publicPath: '/assets/',
|
||||||
|
pathinfo: isVerbose,
|
||||||
|
filename: isDebug ? '[name].js' : '[name].[chunkhash:8].js',
|
||||||
|
chunkFilename: isDebug ? '[name].chunk.js' : '[name].[chunkhash:8].js',
|
||||||
|
},
|
||||||
|
|
||||||
|
resolve: {
|
||||||
|
extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
|
||||||
|
},
|
||||||
|
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.svg$/,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: 'babel-loader',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loader: 'react-svg-loader',
|
||||||
|
options: {
|
||||||
|
svgo: {
|
||||||
|
plugins: [
|
||||||
|
{
|
||||||
|
removeViewBox: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
removeDimensions: true,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
jsx: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(js|jsx|ts|tsx)$/,
|
||||||
|
loader: 'babel-loader',
|
||||||
|
include: [
|
||||||
|
path.resolve(__dirname, '../src'),
|
||||||
|
],
|
||||||
|
options: {
|
||||||
|
cacheDirectory: isDebug,
|
||||||
|
babelrc: false,
|
||||||
|
presets: [
|
||||||
|
['@babel/preset-env', {
|
||||||
|
targets: {
|
||||||
|
browsers: pkg.browserslist,
|
||||||
|
},
|
||||||
|
modules: false,
|
||||||
|
useBuiltIns: 'usage',
|
||||||
|
corejs: {
|
||||||
|
version: 3,
|
||||||
|
},
|
||||||
|
debug: false,
|
||||||
|
}],
|
||||||
|
'@babel/typescript',
|
||||||
|
'@babel/react',
|
||||||
|
],
|
||||||
|
plugins: babelPlugins,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.css/,
|
||||||
|
use: ['style-loader',
|
||||||
|
{
|
||||||
|
loader: 'css-loader',
|
||||||
|
options: {
|
||||||
|
sourceMap: isDebug,
|
||||||
|
modules: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: [
|
||||||
|
// Define free variables
|
||||||
|
// https://webpack.github.io/docs/list-of-plugins.html#defineplugin
|
||||||
|
new webpack.DefinePlugin({
|
||||||
|
'process.env.NODE_ENV': isDebug ? '"development"' : '"production"',
|
||||||
|
'process.env.BROWSER': true,
|
||||||
|
}),
|
||||||
|
|
||||||
|
// Emit a file with assets paths
|
||||||
|
// https://github.com/sporto/assets-webpack-plugin#options
|
||||||
|
new AssetsPlugin({
|
||||||
|
path: path.resolve(__dirname, '../build'),
|
||||||
|
filename: 'assets.json',
|
||||||
|
prettyPrint: true,
|
||||||
|
}),
|
||||||
|
|
||||||
|
// Webpack Bundle Analyzer
|
||||||
|
// https://github.com/th0r/webpack-bundle-analyzer
|
||||||
|
...isAnalyze ? [new BundleAnalyzerPlugin()] : [],
|
||||||
|
],
|
||||||
|
|
||||||
|
optimization: {
|
||||||
|
splitChunks: {
|
||||||
|
chunks: 'all',
|
||||||
|
name: false,
|
||||||
|
cacheGroups: {
|
||||||
|
default: false,
|
||||||
|
defaultVendors: false,
|
||||||
|
|
||||||
|
vendor: {
|
||||||
|
name: 'vendor',
|
||||||
|
chunks: (chunk) => chunk.name === 'client',
|
||||||
|
test: /node_modules/,
|
||||||
|
},
|
||||||
|
three: {
|
||||||
|
test: /[\\/]node_modules[\\/]three[\\/]/,
|
||||||
|
name: 'three',
|
||||||
|
chunks: 'all',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
bail: !isDebug,
|
||||||
|
|
||||||
|
cache: isDebug,
|
||||||
|
};
|
|
@ -1,400 +0,0 @@
|
||||||
/**
|
|
||||||
*/
|
|
||||||
|
|
||||||
import path from 'path';
|
|
||||||
import webpack from 'webpack';
|
|
||||||
import AssetsPlugin from 'assets-webpack-plugin';
|
|
||||||
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
|
|
||||||
import GeneratePackageJsonPlugin from 'generate-package-json-webpack-plugin';
|
|
||||||
import pkg from '../package.json';
|
|
||||||
|
|
||||||
const isDebug = process.argv.includes('--debug');
|
|
||||||
const isVerbose = process.argv.includes('--verbose');
|
|
||||||
const isAnalyze = process.argv.includes('--analyze') || process.argv.includes('--analyse');
|
|
||||||
|
|
||||||
const basePackageValues = {
|
|
||||||
name: pkg.name,
|
|
||||||
version: pkg.version,
|
|
||||||
private: true,
|
|
||||||
engines: pkg.engines,
|
|
||||||
scripts: {
|
|
||||||
start: 'node --nouse-idle-notification --expose-gc web.js',
|
|
||||||
},
|
|
||||||
dependencies: {
|
|
||||||
mysql2: '^2.1.0',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
const versionsPackageFilename = path.resolve(__dirname, '../package.json');
|
|
||||||
|
|
||||||
const config = {
|
|
||||||
|
|
||||||
context: path.resolve(__dirname, '..'),
|
|
||||||
|
|
||||||
mode: (isDebug) ? 'development' : 'production',
|
|
||||||
|
|
||||||
output: {
|
|
||||||
path: path.resolve(__dirname, '../build/public/assets'),
|
|
||||||
publicPath: '/assets/',
|
|
||||||
pathinfo: isVerbose,
|
|
||||||
},
|
|
||||||
|
|
||||||
resolve: {
|
|
||||||
extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
|
|
||||||
},
|
|
||||||
|
|
||||||
module: {
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
test: /\.svg$/,
|
|
||||||
use: [
|
|
||||||
{
|
|
||||||
loader: 'babel-loader',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loader: 'react-svg-loader',
|
|
||||||
options: {
|
|
||||||
svgo: {
|
|
||||||
plugins: [
|
|
||||||
{
|
|
||||||
removeViewBox: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
removeDimensions: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
jsx: false, // true outputs JSX tags
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.html/,
|
|
||||||
use: [
|
|
||||||
{
|
|
||||||
loader: 'html-loader',
|
|
||||||
options: {
|
|
||||||
attrs: [':data-src'],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.md$/,
|
|
||||||
loader: path.resolve(__dirname, './lib/markdown-loader.js'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.txt$/,
|
|
||||||
loader: 'raw-loader',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2)(\?.*)?$/,
|
|
||||||
loader: 'file-loader',
|
|
||||||
query: {
|
|
||||||
name: isDebug ? '[path][name].[ext]?[hash:8]' : '[hash:8].[ext]',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
|
|
||||||
loader: 'url-loader',
|
|
||||||
query: {
|
|
||||||
name: isDebug ? '[path][name].[ext]?[hash:8]' : '[hash:8].[ext]',
|
|
||||||
limit: 10000,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
|
|
||||||
// Don't attempt to continue if there are any errors.
|
|
||||||
bail: !isDebug,
|
|
||||||
|
|
||||||
cache: isDebug,
|
|
||||||
|
|
||||||
stats: {
|
|
||||||
colors: true,
|
|
||||||
reasons: isDebug,
|
|
||||||
hash: isVerbose,
|
|
||||||
version: isVerbose,
|
|
||||||
timings: true,
|
|
||||||
chunks: isVerbose,
|
|
||||||
chunkModules: isVerbose,
|
|
||||||
cached: isVerbose,
|
|
||||||
cachedAssets: isVerbose,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const clientConfig = {
|
|
||||||
...config,
|
|
||||||
|
|
||||||
name: 'client',
|
|
||||||
target: 'web',
|
|
||||||
|
|
||||||
devtool: 'source-map',
|
|
||||||
|
|
||||||
entry: {
|
|
||||||
client: ['./src/client.js'],
|
|
||||||
globe: ['./src/globe.js'],
|
|
||||||
},
|
|
||||||
|
|
||||||
output: {
|
|
||||||
...config.output,
|
|
||||||
filename: isDebug ? '[name].js' : '[name].[chunkhash:8].js',
|
|
||||||
chunkFilename: isDebug ? '[name].chunk.js' : '[name].[chunkhash:8].js',
|
|
||||||
},
|
|
||||||
|
|
||||||
module: {
|
|
||||||
...config.module,
|
|
||||||
rules: [
|
|
||||||
...config.module.rules,
|
|
||||||
{
|
|
||||||
test: /\.(js|jsx|ts|tsx)$/,
|
|
||||||
loader: 'babel-loader',
|
|
||||||
include: [
|
|
||||||
path.resolve(__dirname, '../src'),
|
|
||||||
],
|
|
||||||
query: {
|
|
||||||
// https://github.com/babel/babel-loader#options
|
|
||||||
cacheDirectory: isDebug,
|
|
||||||
|
|
||||||
// https://babeljs.io/docs/usage/options/
|
|
||||||
babelrc: false,
|
|
||||||
presets: [
|
|
||||||
// A Babel preset that can automatically determine the Babel plugins and polyfills
|
|
||||||
// https://github.com/babel/babel-preset-env
|
|
||||||
['@babel/preset-env', {
|
|
||||||
targets: {
|
|
||||||
browsers: pkg.browserslist,
|
|
||||||
},
|
|
||||||
modules: false,
|
|
||||||
useBuiltIns: 'usage',
|
|
||||||
corejs: {
|
|
||||||
version: 3,
|
|
||||||
},
|
|
||||||
debug: false,
|
|
||||||
}],
|
|
||||||
'@babel/typescript',
|
|
||||||
// JSX, Flow
|
|
||||||
// https://github.com/babel/babel/tree/master/packages/babel-preset-react
|
|
||||||
'@babel/react',
|
|
||||||
],
|
|
||||||
plugins: [
|
|
||||||
'@babel/transform-flow-strip-types',
|
|
||||||
['@babel/plugin-proposal-decorators', { legacy: true }],
|
|
||||||
'@babel/plugin-proposal-function-sent',
|
|
||||||
'@babel/plugin-proposal-export-namespace-from',
|
|
||||||
'@babel/plugin-proposal-numeric-separator',
|
|
||||||
'@babel/plugin-proposal-throw-expressions',
|
|
||||||
['@babel/plugin-proposal-class-properties', { loose: true }],
|
|
||||||
'@babel/proposal-object-rest-spread',
|
|
||||||
// Adds component stack to warning messages
|
|
||||||
// https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source
|
|
||||||
...isDebug ? ['@babel/transform-react-jsx-source'] : [],
|
|
||||||
// Adds __self attribute to JSX which React will use for some warnings
|
|
||||||
// https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-self
|
|
||||||
...isDebug ? ['@babel/transform-react-jsx-self'] : [],
|
|
||||||
// react-optimize
|
|
||||||
'@babel/transform-react-constant-elements',
|
|
||||||
'@babel/transform-react-inline-elements',
|
|
||||||
'transform-react-remove-prop-types',
|
|
||||||
'transform-react-pure-class-to-function',
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.css/,
|
|
||||||
use: ['style-loader',
|
|
||||||
{
|
|
||||||
loader: 'css-loader',
|
|
||||||
options: {
|
|
||||||
// CSS Loader https://github.com/webpack/css-loader
|
|
||||||
sourceMap: isDebug,
|
|
||||||
// CSS Modules https://github.com/css-modules/css-modules
|
|
||||||
modules: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
|
|
||||||
plugins: [
|
|
||||||
// Define free variables
|
|
||||||
// https://webpack.github.io/docs/list-of-plugins.html#defineplugin
|
|
||||||
new webpack.DefinePlugin({
|
|
||||||
'process.env.NODE_ENV': isDebug ? '"development"' : '"production"',
|
|
||||||
'process.env.BROWSER': true,
|
|
||||||
__DEV__: isDebug,
|
|
||||||
}),
|
|
||||||
|
|
||||||
// Emit a file with assets paths
|
|
||||||
// https://github.com/sporto/assets-webpack-plugin#options
|
|
||||||
new AssetsPlugin({
|
|
||||||
path: path.resolve(__dirname, '../build'),
|
|
||||||
filename: 'assets.json',
|
|
||||||
prettyPrint: true,
|
|
||||||
}),
|
|
||||||
|
|
||||||
// Webpack Bundle Analyzer
|
|
||||||
// https://github.com/th0r/webpack-bundle-analyzer
|
|
||||||
...isAnalyze ? [new BundleAnalyzerPlugin()] : [],
|
|
||||||
],
|
|
||||||
|
|
||||||
optimization: {
|
|
||||||
splitChunks: {
|
|
||||||
chunks: 'all',
|
|
||||||
name: false,
|
|
||||||
cacheGroups: {
|
|
||||||
default: false,
|
|
||||||
vendors: false,
|
|
||||||
|
|
||||||
vendor: {
|
|
||||||
name: 'vendor',
|
|
||||||
chunks: (chunk) => chunk.name === 'client',
|
|
||||||
test: /node_modules/,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
// Some libraries import Node modules but don't use them in the browser.
|
|
||||||
// Tell Webpack to provide empty mocks for them so importing them works.
|
|
||||||
// https://webpack.github.io/docs/configuration.html#node
|
|
||||||
// https://github.com/webpack/node-libs-browser/tree/master/mock
|
|
||||||
node: {
|
|
||||||
fs: 'empty',
|
|
||||||
net: 'empty',
|
|
||||||
tls: 'empty',
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
const webConfig = {
|
|
||||||
...config,
|
|
||||||
|
|
||||||
name: 'web',
|
|
||||||
target: 'node',
|
|
||||||
|
|
||||||
entry: {
|
|
||||||
web: ['./src/web.js'],
|
|
||||||
backup: ['./src/backup.js'],
|
|
||||||
},
|
|
||||||
|
|
||||||
output: {
|
|
||||||
...config.output,
|
|
||||||
path: path.resolve(__dirname, '../build'),
|
|
||||||
filename: '[name].js',
|
|
||||||
libraryTarget: 'commonjs2',
|
|
||||||
},
|
|
||||||
|
|
||||||
module: {
|
|
||||||
...config.module,
|
|
||||||
|
|
||||||
// Override babel-preset-env configuration for Node.js
|
|
||||||
rules: [
|
|
||||||
...config.module.rules,
|
|
||||||
{
|
|
||||||
test: /\.(js|jsx|ts|tsx)$/,
|
|
||||||
loader: 'babel-loader',
|
|
||||||
include: [
|
|
||||||
path.resolve(__dirname, '../src'),
|
|
||||||
],
|
|
||||||
query: {
|
|
||||||
// https://github.com/babel/babel-loader#options
|
|
||||||
cacheDirectory: isDebug,
|
|
||||||
|
|
||||||
// https://babeljs.io/docs/usage/options/
|
|
||||||
babelrc: false,
|
|
||||||
presets: [
|
|
||||||
// A Babel preset that can automatically determine the Babel plugins and polyfills
|
|
||||||
// https://github.com/babel/babel-preset-env
|
|
||||||
['@babel/preset-env', {
|
|
||||||
targets: {
|
|
||||||
node: pkg.engines.node.replace(/^\D+/g, ''),
|
|
||||||
},
|
|
||||||
modules: false,
|
|
||||||
useBuiltIns: false,
|
|
||||||
debug: false,
|
|
||||||
}],
|
|
||||||
'@babel/typescript',
|
|
||||||
// JSX, Flow
|
|
||||||
// https://github.com/babel/babel/tree/master/packages/babel-preset-react
|
|
||||||
'@babel/react',
|
|
||||||
],
|
|
||||||
plugins: [
|
|
||||||
'@babel/transform-flow-strip-types',
|
|
||||||
['@babel/plugin-proposal-decorators', { legacy: true }],
|
|
||||||
'@babel/plugin-proposal-function-sent',
|
|
||||||
'@babel/plugin-proposal-export-namespace-from',
|
|
||||||
'@babel/plugin-proposal-numeric-separator',
|
|
||||||
'@babel/plugin-proposal-throw-expressions',
|
|
||||||
['@babel/plugin-proposal-class-properties', { loose: true }],
|
|
||||||
'@babel/proposal-object-rest-spread',
|
|
||||||
// Adds component stack to warning messages
|
|
||||||
// https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source
|
|
||||||
...isDebug ? ['@babel/transform-react-jsx-source'] : [],
|
|
||||||
// Adds __self attribute to JSX which React will use for some warnings
|
|
||||||
// https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-self
|
|
||||||
...isDebug ? ['@babel/transform-react-jsx-self'] : [],
|
|
||||||
// react-optimize
|
|
||||||
'@babel/transform-react-constant-elements',
|
|
||||||
'@babel/transform-react-inline-elements',
|
|
||||||
'transform-react-remove-prop-types',
|
|
||||||
'transform-react-pure-class-to-function',
|
|
||||||
],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.css/,
|
|
||||||
use: [
|
|
||||||
{
|
|
||||||
loader: 'css-loader',
|
|
||||||
options: {
|
|
||||||
// CSS Loader https://github.com/webpack/css-loader
|
|
||||||
importLoaders: 1,
|
|
||||||
sourceMap: isDebug,
|
|
||||||
// CSS Modules https://github.com/css-modules/css-modules
|
|
||||||
modules: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
|
|
||||||
// needed because webpack tries to pack socket.io
|
|
||||||
externals: [
|
|
||||||
/\/proxies\.json$/,
|
|
||||||
/\/canvases\.json$/,
|
|
||||||
/^\.\/styleassets\.json$/,
|
|
||||||
/^\.\/assets\.json$/,
|
|
||||||
(context, request, callback) => {
|
|
||||||
const isExternal = request.match(/^[@a-z][a-z/.\-0-9]*$/i)
|
|
||||||
&& !request.match(/\.(css|less|scss|sss)$/i);
|
|
||||||
callback(null, Boolean(isExternal));
|
|
||||||
},
|
|
||||||
],
|
|
||||||
|
|
||||||
plugins: [
|
|
||||||
// Define free variables
|
|
||||||
// https://webpack.github.io/docs/list-of-plugins.html#defineplugin
|
|
||||||
new webpack.DefinePlugin({
|
|
||||||
'process.env.NODE_ENV': isDebug ? '"development"' : '"production"',
|
|
||||||
'process.env.BROWSER': false,
|
|
||||||
__DEV__: isDebug,
|
|
||||||
}),
|
|
||||||
// create package.json for deployment
|
|
||||||
new GeneratePackageJsonPlugin(basePackageValues, versionsPackageFilename),
|
|
||||||
],
|
|
||||||
|
|
||||||
node: {
|
|
||||||
console: false,
|
|
||||||
global: false,
|
|
||||||
process: false,
|
|
||||||
Buffer: false,
|
|
||||||
__filename: false,
|
|
||||||
__dirname: false,
|
|
||||||
},
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
export default [clientConfig, webConfig];
|
|
149
tools/webpack.config.web.js
Normal file
149
tools/webpack.config.web.js
Normal file
|
@ -0,0 +1,149 @@
|
||||||
|
/*
|
||||||
|
*/
|
||||||
|
|
||||||
|
import path from 'path';
|
||||||
|
import webpack from 'webpack';
|
||||||
|
import nodeExternals from 'webpack-node-externals';
|
||||||
|
import GeneratePackageJsonPlugin from 'generate-package-json-webpack-plugin';
|
||||||
|
|
||||||
|
import pkg from '../package.json';
|
||||||
|
|
||||||
|
const isDebug = process.argv.includes('--debug');
|
||||||
|
const isVerbose = process.argv.includes('--verbose');
|
||||||
|
|
||||||
|
const basePackageValues = {
|
||||||
|
name: pkg.name,
|
||||||
|
version: pkg.version,
|
||||||
|
private: true,
|
||||||
|
engines: pkg.engines,
|
||||||
|
scripts: {
|
||||||
|
start: 'node --nouse-idle-notification --expose-gc web.js',
|
||||||
|
},
|
||||||
|
dependencies: {
|
||||||
|
mysql2: '^2.1.0',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* GeneratePackageJsonPlugin is not working
|
||||||
|
* anymore for some unknown reason.
|
||||||
|
* Adding all dependencies instead :(
|
||||||
|
*/
|
||||||
|
basePackageValues.dependencies = pkg.dependencies;
|
||||||
|
|
||||||
|
const babelPlugins = [
|
||||||
|
'@babel/transform-flow-strip-types',
|
||||||
|
['@babel/plugin-proposal-decorators', { legacy: true }],
|
||||||
|
'@babel/plugin-proposal-function-sent',
|
||||||
|
'@babel/plugin-proposal-export-namespace-from',
|
||||||
|
'@babel/plugin-proposal-numeric-separator',
|
||||||
|
'@babel/plugin-proposal-throw-expressions',
|
||||||
|
['@babel/plugin-proposal-class-properties', { loose: true }],
|
||||||
|
'@babel/proposal-object-rest-spread',
|
||||||
|
// react-optimize
|
||||||
|
'@babel/transform-react-constant-elements',
|
||||||
|
'@babel/transform-react-inline-elements',
|
||||||
|
'transform-react-remove-prop-types',
|
||||||
|
'transform-react-pure-class-to-function',
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'web',
|
||||||
|
target: 'node',
|
||||||
|
|
||||||
|
context: path.resolve(__dirname, '..'),
|
||||||
|
mode: (isDebug) ? 'development' : 'production',
|
||||||
|
|
||||||
|
entry: {
|
||||||
|
web: ['./src/web.js'],
|
||||||
|
backup: ['./src/backup.js'],
|
||||||
|
},
|
||||||
|
|
||||||
|
output: {
|
||||||
|
pathinfo: isVerbose,
|
||||||
|
path: path.resolve(__dirname, '../build'),
|
||||||
|
libraryTarget: 'commonjs2',
|
||||||
|
},
|
||||||
|
|
||||||
|
resolve: {
|
||||||
|
extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
|
||||||
|
},
|
||||||
|
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.(js|jsx|ts|tsx)$/,
|
||||||
|
loader: 'babel-loader',
|
||||||
|
include: [
|
||||||
|
path.resolve(__dirname, '../src'),
|
||||||
|
],
|
||||||
|
options: {
|
||||||
|
cacheDirectory: isDebug,
|
||||||
|
|
||||||
|
babelrc: false,
|
||||||
|
presets: [
|
||||||
|
['@babel/preset-env', {
|
||||||
|
targets: {
|
||||||
|
node: pkg.engines.node.replace(/^\D+/g, ''),
|
||||||
|
},
|
||||||
|
modules: false,
|
||||||
|
useBuiltIns: false,
|
||||||
|
debug: false,
|
||||||
|
}],
|
||||||
|
'@babel/typescript',
|
||||||
|
'@babel/react',
|
||||||
|
],
|
||||||
|
plugins: babelPlugins,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.css/,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: 'css-loader',
|
||||||
|
options: {
|
||||||
|
importLoaders: 1,
|
||||||
|
sourceMap: isDebug,
|
||||||
|
modules: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
|
||||||
|
// needed because webpack tries to pack socket.io
|
||||||
|
externals: [
|
||||||
|
/\/proxies\.json$/,
|
||||||
|
/\/canvases\.json$/,
|
||||||
|
/^\.\/styleassets\.json$/,
|
||||||
|
/^\.\/assets\.json$/,
|
||||||
|
nodeExternals(),
|
||||||
|
],
|
||||||
|
|
||||||
|
plugins: [
|
||||||
|
new webpack.DefinePlugin({
|
||||||
|
'process.env.NODE_ENV': isDebug ? '"development"' : '"production"',
|
||||||
|
'process.env.BROWSER': false,
|
||||||
|
}),
|
||||||
|
// create package.json for deployment
|
||||||
|
new GeneratePackageJsonPlugin(basePackageValues, {
|
||||||
|
debug: isVerbose,
|
||||||
|
useInstalledVersions: false,
|
||||||
|
sourcePackageFilenames: [
|
||||||
|
path.resolve(__dirname, '../package.json'),
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
|
||||||
|
node: {
|
||||||
|
global: false,
|
||||||
|
__filename: false,
|
||||||
|
__dirname: false,
|
||||||
|
},
|
||||||
|
|
||||||
|
bail: !isDebug,
|
||||||
|
|
||||||
|
cache: isDebug,
|
||||||
|
};
|
Loading…
Reference in New Issue
Block a user