From 69b4f8b20d5e26ea53d44a24f1aa0f900b5530d6 Mon Sep 17 00:00:00 2001 From: Chazz Date: Sun, 8 Dec 2019 14:09:27 +0100 Subject: [PATCH] refactor(webpack): simplify webpack config and index.html --- .gitignore | 1 + package.json | 4 +- packages/app/babel.config.js | 12 -- packages/app/index.html | 115 +++----------- packages/app/index.prod.html | 30 ---- packages/app/loader.css | 76 --------- packages/app/package.json | 12 +- packages/app/preload.js | 87 ++++++++++ packages/app/webpack.config.dev.js | 91 ----------- packages/app/webpack.config.electron.js | 55 ++++--- packages/app/webpack.config.electron.prod.js | 46 ------ packages/app/webpack.config.js | 157 ++++++++++++++++++- packages/app/webpack.config.prod.js | 105 ------------- 13 files changed, 302 insertions(+), 489 deletions(-) delete mode 100644 packages/app/babel.config.js delete mode 100644 packages/app/index.prod.html delete mode 100644 packages/app/loader.css create mode 100644 packages/app/preload.js delete mode 100644 packages/app/webpack.config.dev.js delete mode 100644 packages/app/webpack.config.electron.prod.js delete mode 100644 packages/app/webpack.config.prod.js diff --git a/.gitignore b/.gitignore index 7adc30d5f4..6646e0a3b2 100644 --- a/.gitignore +++ b/.gitignore @@ -71,6 +71,7 @@ package-lock.json # vscode .vscode/ tsconfig.json +jsconfig.json #nvm .nvmrc \ No newline at end of file diff --git a/package.json b/package.json index 13c3df887a..5561bb966b 100644 --- a/package.json +++ b/package.json @@ -31,8 +31,8 @@ }, "devDependencies": { "babel-eslint": "^10.0.3", - "lerna": "^3.16.4", - "eslint": "^6.7.2" + "eslint": "^6.7.2", + "lerna": "^3.16.4" }, "engines": { "node": ">=0.11.0", diff --git a/packages/app/babel.config.js b/packages/app/babel.config.js deleted file mode 100644 index 904abde69f..0000000000 --- a/packages/app/babel.config.js +++ /dev/null @@ -1,12 +0,0 @@ -module.exports = { - 'presets': [ - '@babel/preset-env', - '@babel/preset-react' - ], - 'plugins': [ - ['@babel/plugin-proposal-decorators', { 'legacy': true }], - '@babel/plugin-proposal-class-properties', - '@babel/plugin-proposal-object-rest-spread' - ], - ignore: [/node_modules/] -}; diff --git a/packages/app/index.html b/packages/app/index.html index 2ad23be92a..4af47d5ac8 100644 --- a/packages/app/index.html +++ b/packages/app/index.html @@ -1,99 +1,22 @@ - - - Nuclear Music Player - - - - - - -
-
-
- - - -
-
-
- + + + + + <% if (htmlWebpackPlugin.options.production) { %> + + + <% } %> + + + +
+ +
+ diff --git a/packages/app/index.prod.html b/packages/app/index.prod.html deleted file mode 100644 index 25c7cb314a..0000000000 --- a/packages/app/index.prod.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - - nuclear music player - - - - - - - - - - -
-
-
- - - -
-
-
- - - - - diff --git a/packages/app/loader.css b/packages/app/loader.css deleted file mode 100644 index b04402f4c2..0000000000 --- a/packages/app/loader.css +++ /dev/null @@ -1,76 +0,0 @@ -body { - background: #282a36; -} - -.loader-container { - position: absolute; - width: 100%; - height: 100%; - background: transparent; - display: flex; - justify-content: center; - align-items: center; - z-index: -1; -} - -.nuclear-loader { - position: relative; - display: flex; - flex-flow: column; - background: linear-gradient(45deg, #43CBFF 0%, #9708CC 100%); - background-size: 200% 200%; - width: 15rem; - height: 15rem; - border-radius: 2rem; - box-shadow: 0 0 38px rgba(0,0,0,0.30), 0 0 12px rgba(0,0,0,0.22); - animation: gradient-anim 2s ease-in-out infinite; -} - -@keyframes gradient-anim { - 0%, 100% { - background-position: 50% 50%; - } - - 25% { - background-position: 0% 100%; - } - - 75% { - background-position: 100% 0%; - } -} - -.nuclear-loader>span { - position: absolute; - width: 0; - height: 0; - border-top: 4rem solid #FAFAFA; - border-left: 3rem solid transparent; - border-right: 3rem solid transparent; -} - -.nuclear-loader>span:nth-child(1) { - right: 4.5rem; - top: 3.5rem; -} - -.nuclear-loader>span:nth-child(2) { - right: 7.5rem; - bottom: 3.5rem; - -} - -.nuclear-loader>span:nth-child(3) { - left: 7.5rem; - bottom: 3.5rem; -} - -@keyframes loader-anim { - 0%, 100% { - border-top: 4rem solid #FAFAFA; - } - - 50% { - border-top: 4rem solid transparent; - } -} diff --git a/packages/app/package.json b/packages/app/package.json index d9d9c68f39..8e0384a57a 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -4,15 +4,12 @@ "description": "Nuclear - Electron app", "scripts": { "start": "npm-run-all --parallel watch electron:dev", - "electron:dev": "webpack --progress --colors --config=webpack.config.electron.js && electron ./bundle.electron.js", - "electron:prod:linux": "npm run build:electron:linux && electron ./dist/bundle.electron.js", + "electron:dev": "webpack --colors --env.NODE_ENV=development --config=webpack.config.electron.js && electron ./bundle.electron.js", "electron:prod": "npm run build:electron && electron ./dist/bundle.electron.js", "electron:docker": "docker run --rm --net=host --env=\"DISPLAY\" --volume=\"$HOME/.Xauthority:/root/.Xauthority:rw\" --device /dev/snd nuclear", - "watch": "webpack-dev-server --verbose --inline --progress --env=dev --verbose", - "build:dist": "webpack --progress --colors --env=prod && cp loader.css dist", - "build:dist:windows": "webpack --progress --colors --env=prod && copy loader.css dist", - "build:electron:linux": "webpack --progress --colors --env.LINUX=true --config=webpack.config.electron.prod.js", - "build:electron": "webpack --progress --colors --config=webpack.config.electron.prod.js", + "watch": "webpack-dev-server --verbose --inline --env.NODE_ENV=development", + "build:dist": "webpack --progress --colors --env.NODE_ENV=production", + "build:electron": "webpack --progress --colors --env.NODE_ENV=production --config=webpack.config.electron.js", "build:docker": "docker build -t nuclear .", "test": "mocha --require ./test/testHelper.js --require regenerator-runtime --timeout 10000 --prof --recursive", "pack": "electron-builder --dir -c.extraMetadata.main=dist/bundle.electron.js", @@ -46,6 +43,7 @@ "dependencies": { "@nuclear/core": "0.5.1", "@nuclear/ui": "0.5.1", + "awilix": "^4.2.3", "billboard-top-100": "^2.0.8", "bluebird": "3.5.3", "body-parser": "^1.18.3", diff --git a/packages/app/preload.js b/packages/app/preload.js new file mode 100644 index 0000000000..89ba9f27d6 --- /dev/null +++ b/packages/app/preload.js @@ -0,0 +1,87 @@ +const template = document.createElement('template'); +template.innerHTML = ` + +
+ + + +
`; + +class NuclearLoader extends HTMLElement { + constructor() { + super(); + this.attachShadow({mode: 'open'}); + this.shadowRoot.appendChild(template.content.cloneNode(true)); + } +} + +window.customElements.define('nuclear-loader', NuclearLoader); diff --git a/packages/app/webpack.config.dev.js b/packages/app/webpack.config.dev.js deleted file mode 100644 index 0bec491c4c..0000000000 --- a/packages/app/webpack.config.dev.js +++ /dev/null @@ -1,91 +0,0 @@ -const webpack = require('webpack'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const path = require('path'); - -const BUILD_DIR = path.resolve(__dirname, 'dist'); -const APP_DIR = path.resolve(__dirname, 'app'); -const RESOURCES_DIR = path.resolve(__dirname, 'resources'); - -const UI_DIR = path.resolve(__dirname, '..', 'ui'); - -const config = { - entry: [ - 'react-hot-loader/patch', - 'webpack-dev-server/client?http://localhost:8080', - 'webpack/hot/only-dev-server', - path.resolve(APP_DIR, 'index.js') - ], - output: { - path: BUILD_DIR, - filename: 'bundle.js', - publicPath: '/' - }, - devServer: { - hot: true, - contentBase: '/', - publicPath: '/' - }, - mode: 'development', - devtool: 'source-map', - optimization: { - namedModules: true - }, - node: { - fs: 'empty' - }, - module: { - rules: [ - { - test: /.jsx?$/, - loader: 'babel-loader', - options: { cacheDirectory: true }, - exclude: /node_modules\/(?!@nuclear).*/ - }, - { - test: /.scss$/, - use: [ - 'style-loader', - 'css-loader?importLoaders=1&modules&localIdentName=[local]!sass-loader' - ] - }, - { - test: /\.css/, - loader: 'style-loader!css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]' - }, { - test: /\.(png|jpg|gif)$/, - loader: 'url-loader', - include: [ - RESOURCES_DIR, - UI_DIR - ] - }, { - test: /\.(ttf|eot|woff|woff2|svg)$/, - loader: 'url-loader', - include: UI_DIR - }, { - test: /\.svg$/, - loader: 'svg-inline-loader' - } - ] - }, - plugins: [ - new webpack.HotModuleReplacementPlugin(), - new HtmlWebpackPlugin({ - template: path.resolve(__dirname, 'index.html'), - minify: { - html5: true, - removeComments: true, - collapseWhitespace: true, - removeRedundantAttributes: true, - useShortDoctype: true, - removeEmptyAttributes: true, - removeStyleLinkTypeAttributes: true, - keepClosingSlash: true - }, - inject: true - }) - ], - target: 'electron-renderer' -}; - -module.exports = config; diff --git a/packages/app/webpack.config.electron.js b/packages/app/webpack.config.electron.js index e6746b8cb0..31394070ba 100644 --- a/packages/app/webpack.config.electron.js +++ b/packages/app/webpack.config.electron.js @@ -1,11 +1,34 @@ -/* eslint-env node */ -const webpack = require('webpack'); +module.exports = (env) => { + const IS_PROD = env.NODE_ENV === 'production'; -module.exports = () => { - const entry = './server/main.dev.js'; + const jsxRule = { + test: /.jsx?$/, + loader: 'babel-loader', + options: { + cacheDirectory: true, + presets: [ + ['@babel/preset-env', { + targets: { + electron: '4.2' + } + }] + ], + plugins: [ + ['@babel/plugin-proposal-decorators', { 'legacy': true }], + '@babel/plugin-proposal-class-properties', + '@babel/plugin-proposal-object-rest-spread' + ], + ignore: [/node_modules/] + }, + exclude: /node_modules\/(?!@nuclear).*/ + }; + + if (IS_PROD) { + delete jsxRule.exclude; + } return { - entry, + entry: IS_PROD ? './server/main.prod.js' : './server/main.dev.js', resolve: { alias: { jsbi: __dirname + '/node_modules/jsbi/dist/jsbi-cjs.js' @@ -13,25 +36,15 @@ module.exports = () => { }, output: { path: __dirname, - filename: 'bundle.electron.js' - }, - mode: 'development', - stats: { - warningsFilter: 'express' + filename: IS_PROD ? './dist/bundle.electron.js' : './bundle.electron.js' }, + mode: IS_PROD ? 'production' : 'development', + stats: 'errors-only', + // stats: 'minimal' + optimization: { namedModules: true }, module: { - rules: [ - { - test: /.jsx?$/, - loader: 'babel-loader', - options: {cacheDirectory: true}, - exclude: /node_modules\/(?!@nuclear).*/ - } - ] + rules: [jsxRule] }, - plugins: [ - new webpack.NamedModulesPlugin() - ], node: { fs: 'empty', __dirname: false, diff --git a/packages/app/webpack.config.electron.prod.js b/packages/app/webpack.config.electron.prod.js deleted file mode 100644 index 2f1be913c3..0000000000 --- a/packages/app/webpack.config.electron.prod.js +++ /dev/null @@ -1,46 +0,0 @@ -/* eslint-env node */ - -module.exports = env => { - let entry = env && env.LINUX ? './server/main.prod.linux.js' : './server/main.prod.js'; - - return { - entry, - resolve: { - alias: { - jsbi: __dirname + '/node_modules/jsbi/dist/jsbi-cjs.js' - } - }, - output: { - path: __dirname, - filename: './dist/bundle.electron.js' - }, - mode: 'production', - optimization: { - namedModules: true - }, - stats: { - warningsFilter: 'express' - }, - module: { - rules: [ - { - test: /.jsx?$/, - loader: 'babel-loader', - options: { - cacheDirectory: true - } - } - ] - }, - plugins: [], - externals: { - dbus: 'dbus' - }, - node: { - fs: 'empty', - __dirname: false, - __filename: false - }, - target: 'electron-main' - }; -}; diff --git a/packages/app/webpack.config.js b/packages/app/webpack.config.js index 29e0cf5695..29f0895408 100644 --- a/packages/app/webpack.config.js +++ b/packages/app/webpack.config.js @@ -1,3 +1,154 @@ -module.exports = function(env) { - return require(`./webpack.config.${env}.js`) -} +const webpack = require('webpack'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const path = require('path'); +const fs = require('fs'); + +const BUILD_DIR = path.resolve(__dirname, 'dist'); +const APP_DIR = path.resolve(__dirname, 'app'); +const RESOURCES_DIR = path.resolve(__dirname, 'resources'); + +const UI_DIR = path.resolve(__dirname, '..', 'ui'); + +module.exports = (env) => { + const IS_PROD = env.NODE_ENV === 'production'; + const IS_DEV = env.NODE_ENV = 'development'; + + const entry = IS_PROD + ? path.resolve(APP_DIR, 'index.js') + : [ + 'react-hot-loader/patch', + 'webpack-dev-server/client?http://localhost:8080', + 'webpack/hot/only-dev-server', + path.resolve(APP_DIR, 'index.js') + ]; + const output = { + path: BUILD_DIR, + filename: 'bundle.js' + }; + const optimization = { + namedModules: true + }; + const jsxRule = { + test: /.jsx?$/, + loader: 'babel-loader', + options: { + cacheDirectory: true, + presets: [ + ['@babel/preset-env', { + targets: { + electron: '4.2' + } + }], + '@babel/preset-react' + ], + plugins: [ + ['@babel/plugin-proposal-decorators', { 'legacy': true }], + '@babel/plugin-proposal-class-properties', + '@babel/plugin-proposal-object-rest-spread' + ], + ignore: [/node_modules/] + } + }; + + + if (IS_PROD) { + jsxRule.include = [ + APP_DIR, + UI_DIR + ]; + jsxRule.exclude = /node_modules\/electron-timber\/preload\.js/; + optimization.splitChunks = { + chunks: 'all', + cacheGroups: { + vendors: { + test: /[\\/]node_modules[\\/]/, + priority: -10 + }, + default: { + minChunks: 2, + priority: -20, + reuseExistingChunk: true + } + } + }; + } else { + output.publicPath = '/'; + jsxRule.exclude = /node_modules\/(?!@nuclear).*/; + } + + const config = { + entry, + output, + mode: IS_PROD ? 'production' : 'development', + devtool: 'source-map', + optimization, + node: { + fs: 'empty' + }, + module: { + rules: [ + jsxRule, + { + test: /.scss$/, + use: [ + 'style-loader', + 'css-loader?importLoaders=1&modules&localIdentName=[local]!sass-loader' + ] + }, + { + test: /\.css/, + loader: 'style-loader!css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]' + }, { + test: /\.(png|jpg|gif)$/, + loader: 'url-loader', + include: [ + RESOURCES_DIR, + UI_DIR + ] + }, { + test: /\.(ttf|eot|woff|woff2|svg)$/, + loader: 'url-loader', + include: UI_DIR + }, { + test: /\.svg$/, + loader: 'svg-inline-loader' + } + ] + }, + plugins: [ + new webpack.HotModuleReplacementPlugin(), + new HtmlWebpackPlugin({ + template: path.resolve(__dirname, 'index.html'), + production: IS_PROD, + minify: { + html5: true, + removeComments: true, + collapseWhitespace: true, + removeRedundantAttributes: true, + useShortDoctype: true, + removeEmptyAttributes: true, + removeStyleLinkTypeAttributes: true, + keepClosingSlash: true + }, + inject: true + }), + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(env.NODE_ENV) + }) + ], + target: 'electron-renderer' + }; + + if (IS_DEV) { + config.devServer = { + hot: true, + contentBase: '/', + publicPath: '/' + }; + process.on('SIGINT', () => { + fs.unlink(path.resolve(__dirname, 'bundle.electron.js'), () => {}); + }); + } + + return config; +}; diff --git a/packages/app/webpack.config.prod.js b/packages/app/webpack.config.prod.js deleted file mode 100644 index c1475a5271..0000000000 --- a/packages/app/webpack.config.prod.js +++ /dev/null @@ -1,105 +0,0 @@ -const webpack = require('webpack'); -const HtmlWebpackPlugin = require('html-webpack-plugin'); -const path = require('path'); - -const BUILD_DIR = path.resolve(__dirname, 'dist'); -const APP_DIR = path.resolve(__dirname, 'app'); -const RESOURCES_DIR = path.resolve(__dirname, 'resources'); - -const UI_DIR = path.resolve(__dirname, '..', 'ui'); - -const config = { - entry: path.resolve(APP_DIR, 'index.js'), - output: { - path: BUILD_DIR, - filename: 'bundle.js' - }, - node: { - fs: 'empty' - }, - mode: 'production', - devtool: 'source-map', - optimization: { - namedModules: true, - splitChunks: { - chunks: 'all', - cacheGroups: { - vendors: { - test: /[\\/]node_modules[\\/]/, - priority: -10 - }, - default: { - minChunks: 2, - priority: -20, - reuseExistingChunk: true - } - } - } - }, - module: { - rules: [ - { - test: /.jsx?$/, - loader: 'babel-loader', - options: { - cacheDirectory: true - }, - include: [ - APP_DIR, - UI_DIR - ], - exclude: /node_modules\/electron\-timber\/preload\.js/ - }, - { - test: /.node$/, - use: 'node-loader' - }, - { - test: /.scss$/, - use: [ - 'style-loader', - 'css-loader?importLoaders=1&modules&localIdentName=[local]!sass-loader' - ] - }, { - test: /\.css/, - loader: 'style-loader!css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]' - }, { - test: /\.(png|jpg|gif)$/, - loader: 'url-loader', - include: [ - RESOURCES_DIR, - UI_DIR - ] - }, { - test: /\.(ttf|eot|woff|woff2|svg)$/, - loader: 'url-loader', - include: UI_DIR - }, { - test: /\.svg$/, - loader: 'svg-inline-loader' - } - ] - }, - plugins: [ - new HtmlWebpackPlugin({ - template: 'index.prod.html', - minify: { - html5: true, - removeComments: true, - collapseWhitespace: true, - removeRedundantAttributes: true, - useShortDoctype: true, - removeEmptyAttributes: true, - removeStyleLinkTypeAttributes: true, - keepClosingSlash: true - }, - inject: true - }), - new webpack.DefinePlugin({ - 'process.env.NODE_ENV': JSON.stringify('production') - }) - ], - target: 'electron-renderer' -}; - -module.exports = config;