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-throw-expressions",
|
||||
["@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"
|
||||
],
|
||||
"dependencies": {
|
||||
"bcrypt": "^4.0.1",
|
||||
"bcrypt": "^5.0.0",
|
||||
"bluebird": "^3.5.0",
|
||||
"body-parser": "^1.17.2",
|
||||
"bufferutil": "^4.0.1",
|
||||
"compression": "^1.7.3",
|
||||
"connect-redis": "^4.0.4",
|
||||
"connect-redis": "^5.0.0",
|
||||
"cookie-parser": "^1.4.5",
|
||||
"core-js": "^3.6.5",
|
||||
"core-js": "^3.8.0",
|
||||
"cors": "^2.8.4",
|
||||
"etag": "^1.8.1",
|
||||
"express": "^4.15.3",
|
||||
|
|
@ -41,29 +41,28 @@
|
|||
"global": "^4.3.2",
|
||||
"http-proxy-agent": "^4.0.1",
|
||||
"image-q": "^2.1.2",
|
||||
"ip-address": "^6.4.0",
|
||||
"isomorphic-fetch": "^2.2.1",
|
||||
"ip-address": "^7.1.0",
|
||||
"isomorphic-fetch": "^3.0.0",
|
||||
"js-file-download": "^0.4.12",
|
||||
"keycode": "^2.1.9",
|
||||
"localforage": "^1.9.0",
|
||||
"morgan": "^1.10.0",
|
||||
"multer": "^1.4.1",
|
||||
"mysql2": "^2.2.5",
|
||||
"node-sass": "^4.14.1",
|
||||
"nodemailer": "^6.4.11",
|
||||
"nodemailer": "^6.4.16",
|
||||
"passport": "^0.4.0",
|
||||
"passport-discord": "^0.1.4",
|
||||
"passport-facebook": "^3.0.0",
|
||||
"passport-google-oauth": "^2.0.0",
|
||||
"passport-json": "^1.2.0",
|
||||
"passport-reddit": "^0.2.4",
|
||||
"passport-vkontakte": "^0.3.3",
|
||||
"react": "^16.13.1",
|
||||
"react-dom": "^16.13.1",
|
||||
"react-icons": "^3.11.0",
|
||||
"react-modal": "^3.11.2",
|
||||
"passport-vkontakte": "^0.5.0",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-icons": "^4.1.0",
|
||||
"react-modal": "^3.12.1",
|
||||
"react-redux": "^7.2.1",
|
||||
"react-responsive": "^8.1.0",
|
||||
"react-responsive": "^8.2.0",
|
||||
"react-stay-scrolled": "^7.1.0",
|
||||
"react-toggle-button": "^2.1.0",
|
||||
"redis": "^3.0.2",
|
||||
|
|
@ -72,19 +71,19 @@
|
|||
"redux-logger": "^3.0.6",
|
||||
"redux-persist": "^6.0.0",
|
||||
"redux-thunk": "^2.2.0",
|
||||
"sequelize": "^5.21.7",
|
||||
"sharp": "^0.26.1",
|
||||
"sequelize": "^6.3.5",
|
||||
"sharp": "^0.26.3",
|
||||
"startaudiocontext": "^1.2.1",
|
||||
"sweetalert2": "^9.10.12",
|
||||
"three": "^0.120.1",
|
||||
"three-trackballcontrols-ts": "^0.2.2",
|
||||
"sweetalert2": "^10.10.4",
|
||||
"three": "^0.123.0",
|
||||
"three-trackballcontrols": "^0.9.0",
|
||||
"url-search-params-polyfill": "^8.1.0",
|
||||
"winston": "^3.3.3",
|
||||
"winston-daily-rotate-file": "^4.5.0",
|
||||
"ws": "^7.3.1"
|
||||
"ws": "^7.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.11.6",
|
||||
"@babel/core": "^7.12.9",
|
||||
"@babel/node": "^7.10.5",
|
||||
"@babel/plugin-proposal-class-properties": "^7.10.4",
|
||||
"@babel/plugin-proposal-decorators": "^7.10.5",
|
||||
|
|
@ -96,9 +95,9 @@
|
|||
"@babel/plugin-proposal-json-strings": "^7.10.4",
|
||||
"@babel/plugin-proposal-logical-assignment-operators": "^7.11.0",
|
||||
"@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-optional-chaining": "^7.11.0",
|
||||
"@babel/plugin-proposal-optional-chaining": "^7.12.7",
|
||||
"@babel/plugin-proposal-pipeline-operator": "^7.10.5",
|
||||
"@babel/plugin-proposal-throw-expressions": "^7.10.4",
|
||||
"@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-inline-elements": "^7.10.4",
|
||||
"@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-react": "^7.10.4",
|
||||
"@babel/preset-typescript": "^7.10.4",
|
||||
"assets-webpack-plugin": "^3.9.12",
|
||||
"@babel/preset-react": "^7.12.7",
|
||||
"@babel/preset-typescript": "^7.12.7",
|
||||
"assets-webpack-plugin": "^6.0.5",
|
||||
"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-remove-prop-types": "^0.4.24",
|
||||
"clean-css": "^4.2.3",
|
||||
"css-loader": "^3.5.3",
|
||||
"eslint": "^6.8.0",
|
||||
"eslint-config-airbnb": "^18.2.0",
|
||||
"eslint-config-airbnb-base": "^14.2.0",
|
||||
"eslint-plugin-flowtype": "^4.7.0",
|
||||
"css-loader": "^5.0.1",
|
||||
"eslint": "^7.14.0",
|
||||
"eslint-config-airbnb": "^18.2.1",
|
||||
"eslint-config-airbnb-base": "^14.2.1",
|
||||
"eslint-plugin-flowtype": "^5.2.0",
|
||||
"eslint-plugin-import": "^2.22.1",
|
||||
"eslint-plugin-jsx-a11y": "^6.3.1",
|
||||
"eslint-plugin-react": "^7.21.2",
|
||||
"flow-bin": "^0.134.0",
|
||||
"generate-package-json-webpack-plugin": "^1.1.2",
|
||||
"flow-bin": "^0.138.0",
|
||||
"generate-package-json-webpack-plugin": "^2.1.1",
|
||||
"json-loader": "^0.5.4",
|
||||
"npm-check": "^5.9.2",
|
||||
"react-hot-loader": "^4.13.0",
|
||||
"react-svg-loader": "^3.0.3",
|
||||
"rimraf": "^3.0.2",
|
||||
"sass-loader": "^8.0.2",
|
||||
"style-loader": "^1.2.1",
|
||||
"webpack": "^4.44.2",
|
||||
"webpack-bundle-analyzer": "^3.9.0",
|
||||
"webpack-dev-middleware": "^3.7.1",
|
||||
"style-loader": "^2.0.0",
|
||||
"webpack": "^5.9.0",
|
||||
"webpack-bundle-analyzer": "^4.2.0",
|
||||
"webpack-dev-middleware": "^4.0.2",
|
||||
"webpack-hot-middleware": "^2.18.0",
|
||||
"webpack-node-externals": "^2.5.2",
|
||||
"write-file-webpack-plugin": "^4.0.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import * as THREE from 'three';
|
||||
|
||||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
|
||||
import { TrackballControls } from 'three-trackballcontrols-ts';
|
||||
import TrackballControls from 'three-trackballcontrols';
|
||||
|
||||
|
||||
function checkMaterial(object) {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
|
||||
import { applyMiddleware, createStore, compose } from 'redux';
|
||||
import thunk from 'redux-thunk';
|
||||
import { createLogger } from 'redux-logger';
|
||||
import { persistStore } from 'redux-persist';
|
||||
|
||||
import audio from './audio';
|
||||
|
|
@ -18,14 +17,6 @@ import extensions from './extensions';
|
|||
import reducers from '../reducers';
|
||||
|
||||
|
||||
const isDebuggingInChrome = __DEV__ && !!window.navigator.userAgent;
|
||||
|
||||
const logger = createLogger({
|
||||
predicate: () => isDebuggingInChrome,
|
||||
collapsed: true,
|
||||
duration: true,
|
||||
});
|
||||
|
||||
const store = createStore(
|
||||
reducers,
|
||||
undefined,
|
||||
|
|
@ -41,7 +32,6 @@ const store = createStore(
|
|||
protocolClientHook,
|
||||
rendererHook,
|
||||
extensions,
|
||||
logger,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -9,7 +9,20 @@
|
|||
|
||||
import fs from 'fs';
|
||||
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.
|
||||
|
|
@ -20,7 +33,7 @@ function bundle() {
|
|||
* Pretty dirty, but we did write an issue and they might
|
||||
* 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 files = [
|
||||
'./node_modules/image-q/dist/esm/basicAPI.js',
|
||||
|
|
@ -31,17 +44,18 @@ function bundle() {
|
|||
fileContent = fileContent.replace(regex, 'core-js/features/set-immediate');
|
||||
fs.writeFileSync(file, fileContent);
|
||||
});
|
||||
console.log('Pathing image-q done');
|
||||
console.log('Patching image-q done');
|
||||
} catch {
|
||||
console.log('Error while patching image-q');
|
||||
}
|
||||
console.log('Bundle with webpack....');
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
webpack(webpackConfig).run((err, stats) => {
|
||||
webpack([webpackConfigWeb, webpackConfigClient]).run((err, stats) => {
|
||||
if (err) {
|
||||
return reject(err);
|
||||
}
|
||||
|
||||
console.log(stats.toString(webpackConfig[0].stats));
|
||||
console.log(stats.toString(wpStats));
|
||||
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