diff --git a/package.json b/package.json index 8dc96f1d6..c60b2e2eb 100644 --- a/package.json +++ b/package.json @@ -4,12 +4,11 @@ "description": "", "main": "index.js", "scripts": { - "dev": "cross-env APP_ENV=development webpack serve --env mode=dev --env isDevServer --mode development --config ./webpack.config.js", - "dev:mocked": "cross-env APP_ENV=test APP_MOCKED_CLIENT=1 webpack serve --env mode=dev --env isDevServer --mode development --config ./webpack.config.js --port 1235", - "build": "webpack --mode production", - "build:mocked": "cross-env APP_ENV=test APP_MOCKED_CLIENT=1 webpack --env mode=dev --mode development --config ./webpack.config.js", - "build:staging": "rm -rf dist/ && APP_ENV=staging APP_VERSION=$(npm run print_version --silent) npm run build && ./deploy/copy_to_dist.sh", - "build:production": "npm i && rm -rf dist/ && APP_VERSION=$(npm run inc_version --silent) APP_ENV=production npm run build && ./deploy/copy_to_dist.sh", + "dev": "cross-env APP_ENV=development webpack serve --mode development", + "dev:mocked": "cross-env APP_ENV=test APP_MOCKED_CLIENT=1 webpack serve --mode development --port 1235", + "build:mocked": "cross-env APP_ENV=test APP_MOCKED_CLIENT=1 webpack --mode development", + "build:staging": "APP_ENV=staging APP_VERSION=$(npm run print_version --silent) webpack --mode development && ./deploy/copy_to_dist.sh", + "build:production": "npm i && APP_VERSION=$(npm run inc_version --silent) webpack && ./deploy/copy_to_dist.sh", "deploy:production": "npm run build:production && git add -A && git commit -a -m '[Build]' --no-verify && git push", "print_version": "node -p -e \"require('./package.json').version\"", "inc_version": "echo $((`cat .patch-version` + 1)) > .patch-version && echo \"$(node -p -e \"require('./package.json').version.match(/^\\d+\\.\\d+/)[0]\").$(cat .patch-version)\"", diff --git a/webpack.config.js b/webpack.config.js index 99bb52f78..d951083e2 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -15,13 +15,20 @@ const StatoscopeWebpackPlugin = require('@statoscope/webpack-plugin').default; const WebpackContextExtension = require('./dev/webpackContextExtension'); const appVersion = require('./package.json').version; +const { + HEAD, + APP_ENV = 'production', + APP_MOCKED_CLIENT = '', +} = process.env; + dotenv.config(); -module.exports = (env = {}, argv = {}) => { +module.exports = (_env, { mode = 'production' }) => { return { - mode: argv.mode, + mode, entry: './src/index.tsx', target: 'web', + devServer: { port: 1234, host: '0.0.0.0', @@ -55,9 +62,11 @@ module.exports = (env = {}, argv = {}) => { output: { filename: '[name].[contenthash].js', chunkFilename: '[id].[chunkhash].js', - assetModuleFilename: '[name].[contenthash].[ext]', - path: path.resolve(__dirname, argv['output-path'] || 'dist'), + assetModuleFilename: '[name].[contenthash][ext]', + path: path.resolve(__dirname, 'dist'), + clean: true, }, + module: { rules: [ { @@ -88,7 +97,7 @@ module.exports = (env = {}, argv = {}) => { modules: { exportLocalsConvention: 'camelCase', auto: true, - localIdentName: argv['optimize-minimize'] ? '[hash:base64]' : '[path][name]__[local]' + localIdentName: mode === 'production' ? '[hash:base64]' : '[name]__[local]' } } }, @@ -110,6 +119,7 @@ module.exports = (env = {}, argv = {}) => { }, ], }, + resolve: { extensions: ['.js', '.ts', '.tsx'], fallback: { @@ -119,20 +129,21 @@ module.exports = (env = {}, argv = {}) => { fs: false, }, }, + plugins: [ // Clearing of the unused files for code highlight for smaller chunk count new ContextReplacementPlugin( /highlight\.js\/lib\/languages/, /^((?!\.js\.js).)*$/ ), - ...(process.env.APP_MOCKED_CLIENT === '1' ? [new NormalModuleReplacementPlugin( + ...(APP_MOCKED_CLIENT === '1' ? [new NormalModuleReplacementPlugin( /src\/lib\/gramjs\/client\/TelegramClient\.js/, './MockClient.ts' )] : []), new HtmlWebpackPlugin({ - appName: process.env.APP_ENV === 'production' ? 'Telegram Web' : 'Telegram Web Beta', - appleIcon: process.env.APP_ENV === 'production' ? 'apple-touch-icon' : 'apple-touch-icon-dev', - mainIcon: process.env.APP_ENV === 'production' ? 'icon-192x192' : 'icon-dev-192x192', + appName: APP_ENV === 'production' ? 'Telegram Web' : 'Telegram Web Beta', + appleIcon: APP_ENV === 'production' ? 'apple-touch-icon' : 'apple-touch-icon-dev', + mainIcon: APP_ENV === 'production' ? 'icon-192x192' : 'icon-dev-192x192', template: 'src/index.html', }), new MiniCssExtractPlugin({ @@ -141,8 +152,8 @@ module.exports = (env = {}, argv = {}) => { ignoreOrder: true, }), new EnvironmentPlugin({ - APP_ENV: 'production', - APP_MOCKED_CLIENT: '', + APP_ENV, + APP_MOCKED_CLIENT, APP_NAME: null, APP_VERSION: appVersion, TELEGRAM_T_API_ID: undefined, @@ -152,9 +163,9 @@ module.exports = (env = {}, argv = {}) => { new DefinePlugin({ APP_REVISION: DefinePlugin.runtimeValue(() => { const { branch, commit } = getGitMetadata(); - const shouldDisplayCommit = process.env.APP_ENV === 'staging' || !branch || branch === 'HEAD'; + const shouldDisplayCommit = APP_ENV === 'staging' || !branch || branch === 'HEAD'; return JSON.stringify(shouldDisplayCommit ? commit : branch); - }, argv.mode === 'development' ? true : []), + }, mode === 'development' ? true : []), }), new ProvidePlugin({ Buffer: ['buffer', 'Buffer'], @@ -171,11 +182,9 @@ module.exports = (env = {}, argv = {}) => { }), ], - ...(!env.noSourceMap && { - devtool: 'source-map', - }), + devtool: 'source-map', - ...(process.env.APP_ENV !== 'production' && { + ...(APP_ENV !== 'production' && { optimization: { chunkIds: 'named', } @@ -185,7 +194,7 @@ module.exports = (env = {}, argv = {}) => { function getGitMetadata() { const gitRevisionPlugin = new GitRevisionPlugin(); - const branch = process.env.HEAD || gitRevisionPlugin.branch(); + const branch = HEAD || gitRevisionPlugin.branch(); const commit = gitRevisionPlugin.commithash().substring(0, 7); return { branch, commit }; }