Eduard Kuzmenko
2 years ago
14 changed files with 452 additions and 452 deletions
@ -1,313 +1,313 @@ |
|||||||
const path = require('path'); |
const path = require('path'); |
||||||
const HtmlWebpackPlugin = require('html-webpack-plugin'); |
const HtmlWebpackPlugin = require('html-webpack-plugin'); |
||||||
const MediaQueryPlugin = require('media-query-plugin'); |
const MediaQueryPlugin = require('media-query-plugin'); |
||||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); |
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); |
||||||
const postcssPresetEnv = require('postcss-preset-env'); |
const postcssPresetEnv = require('postcss-preset-env'); |
||||||
// const ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin');
|
// const ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin');
|
||||||
const { RetryChunkLoadPlugin } = require('webpack-retry-chunk-load-plugin'); |
const {RetryChunkLoadPlugin} = require('webpack-retry-chunk-load-plugin'); |
||||||
const fs = require('fs'); |
const fs = require('fs'); |
||||||
const Dotenv = require('dotenv-webpack'); |
const Dotenv = require('dotenv-webpack'); |
||||||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; |
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; |
||||||
const keepAsset = require('./keepAsset'); |
const keepAsset = require('./keepAsset'); |
||||||
const HtmlWebpackInjectPreload = require('@principalstudio/html-webpack-inject-preload'); |
const HtmlWebpackInjectPreload = require('@principalstudio/html-webpack-inject-preload'); |
||||||
|
|
||||||
const allowedIPs = ['127.0.0.1']; |
const allowedIPs = ['127.0.0.1']; |
||||||
const devMode = process.env.NODE_ENV !== 'production'; |
const devMode = process.env.NODE_ENV !== 'production'; |
||||||
const useLocal = true; |
const useLocal = true; |
||||||
const useLocalNotLocal = false; |
const useLocalNotLocal = false; |
||||||
|
|
||||||
if(devMode) { |
if(devMode) { |
||||||
console.log('DEVMODE IS ON!'); |
console.log('DEVMODE IS ON!'); |
||||||
} |
} |
||||||
|
|
||||||
const MTPROTO_HTTP = false; |
const MTPROTO_HTTP = false; |
||||||
const MTPROTO_AUTO = true; |
const MTPROTO_AUTO = true; |
||||||
|
|
||||||
const opts = { |
const opts = { |
||||||
MTPROTO_WORKER: true, |
'MTPROTO_WORKER': true, |
||||||
MTPROTO_SW: false, |
'MTPROTO_SW': false, |
||||||
MTPROTO_HTTP: MTPROTO_HTTP, |
'MTPROTO_HTTP': MTPROTO_HTTP, |
||||||
MTPROTO_HTTP_UPLOAD: false, |
'MTPROTO_HTTP_UPLOAD': false, |
||||||
MTPROTO_AUTO: MTPROTO_AUTO, // use HTTPS when WS is unavailable
|
'MTPROTO_AUTO': MTPROTO_AUTO, // use HTTPS when WS is unavailable
|
||||||
MTPROTO_HAS_HTTP: MTPROTO_AUTO || MTPROTO_HTTP, |
'MTPROTO_HAS_HTTP': MTPROTO_AUTO || MTPROTO_HTTP, |
||||||
MTPROTO_HAS_WS: MTPROTO_AUTO || !MTPROTO_HTTP, |
'MTPROTO_HAS_WS': MTPROTO_AUTO || !MTPROTO_HTTP, |
||||||
SAFARI_PROXY_WEBSOCKET: false, |
'SAFARI_PROXY_WEBSOCKET': false, |
||||||
DEBUG: devMode, |
'DEBUG': devMode, |
||||||
|
|
||||||
version: 3, |
'version': 3, |
||||||
'ifdef-verbose': devMode, // add this for verbose output
|
'ifdef-verbose': devMode, // add this for verbose output
|
||||||
'ifdef-triple-slash': true, // add this to use double slash comment instead of default triple slash
|
'ifdef-triple-slash': false, // add this to use double slash comment instead of default triple slash
|
||||||
'ifdef-fill-with-blanks': true // add this to remove code with blank spaces instead of "//" comments
|
'ifdef-fill-with-blanks': true, // add this to remove code with blank spaces instead of "//" comments
|
||||||
}; |
}; |
||||||
|
|
||||||
const domain = 'yourdomain.com'; |
const domain = 'yourdomain.com'; |
||||||
const localIp = '192.168.92.78'; |
const localIp = '192.168.92.78'; |
||||||
|
|
||||||
const middleware = (req, res, next) => { |
const middleware = (req, res, next) => { |
||||||
let IP = ''; |
let IP = ''; |
||||||
if(req.headers['cf-connecting-ip']) { |
if (req.headers['cf-connecting-ip']) { |
||||||
IP = req.headers['cf-connecting-ip']; |
IP = req.headers['cf-connecting-ip']; |
||||||
} else { |
} else { |
||||||
IP = req.connection.remoteAddress.split(':').pop(); |
IP = req.connection.remoteAddress.split(':').pop(); |
||||||
} |
} |
||||||
|
|
||||||
if(!allowedIPs.includes(IP) && !/^192\.168\.\d{1,3}\.\d{1,3}$/.test(IP)) { |
if (!allowedIPs.includes(IP) && !/^192\.168\.\d{1,3}\.\d{1,3}$/.test(IP)) { |
||||||
console.log('Bad IP connecting: ' + IP, req.url); |
console.log('Bad IP connecting: ' + IP, req.url); |
||||||
res.status(404).send('Nothing interesting here.'); |
res.status(404).send('Nothing interesting here.'); |
||||||
} else { |
} else { |
||||||
if(req.url.indexOf('/assets/') !== 0) { |
if (req.url.indexOf('/assets/') !== 0) { |
||||||
console.log(req.url, IP); |
console.log(req.url, IP); |
||||||
} |
} |
||||||
|
|
||||||
next(); |
next(); |
||||||
} |
} |
||||||
}; |
}; |
||||||
|
|
||||||
module.exports = { |
module.exports = { |
||||||
module: { |
module: { |
||||||
rules: [ |
rules: [ |
||||||
{ |
{ |
||||||
test: /\.scss$/, |
test: /\.scss$/, |
||||||
use: [ |
use: [ |
||||||
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,/* { |
devMode ? 'style-loader' : MiniCssExtractPlugin.loader, /* { |
||||||
loader: MiniCssExtractPlugin.loader, |
loader: MiniCssExtractPlugin.loader, |
||||||
options: { |
options: { |
||||||
hmr: devMode, |
hmr: devMode, |
||||||
reloadAll: true, |
reloadAll: true, |
||||||
} |
} |
||||||
}, */ |
}, */ |
||||||
|
|
||||||
// Webpack 4
|
// Webpack 4
|
||||||
// 'css-loader?url=false',
|
// 'css-loader?url=false',
|
||||||
// Webpack 5
|
// Webpack 5
|
||||||
{ |
{ |
||||||
loader: 'css-loader', |
loader: 'css-loader', |
||||||
options: { |
options: { |
||||||
url: false |
url: false, |
||||||
} |
}, |
||||||
}, |
}, |
||||||
|
|
||||||
devMode ? undefined : MediaQueryPlugin.loader, |
devMode ? undefined : MediaQueryPlugin.loader, |
||||||
{ |
{ |
||||||
loader: 'postcss-loader', |
loader: 'postcss-loader', |
||||||
options: { |
options: { |
||||||
// Webpack 4
|
// Webpack 4
|
||||||
// ident: 'postcss',
|
// ident: 'postcss',
|
||||||
// plugins: [
|
// plugins: [
|
||||||
// postcssPresetEnv(),
|
// postcssPresetEnv(),
|
||||||
// ],
|
// ],
|
||||||
|
|
||||||
// Webpack 5
|
// Webpack 5
|
||||||
postcssOptions: { |
postcssOptions: { |
||||||
plugins: [ |
plugins: [ |
||||||
postcssPresetEnv(), |
postcssPresetEnv(), |
||||||
] |
], |
||||||
} |
}, |
||||||
} |
}, |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
loader: 'sass-loader', |
loader: 'sass-loader', |
||||||
options: { |
options: { |
||||||
sourceMap: devMode |
sourceMap: devMode, |
||||||
} |
}, |
||||||
} |
}, |
||||||
].filter(Boolean) |
].filter(Boolean), |
||||||
}, |
}, |
||||||
// {
|
// {
|
||||||
// test: /\.worker\.ts$/i,
|
// test: /\.worker\.ts$/i,
|
||||||
// loader: "worker-loader",
|
// loader: "worker-loader",
|
||||||
// // options: {
|
// // options: {
|
||||||
// // filename: "[name].[contenthash].worker.js",
|
// // filename: "[name].[contenthash].worker.js",
|
||||||
// // }
|
// // }
|
||||||
// },
|
// },
|
||||||
{ |
{ |
||||||
test: /\.ts?$/, |
test: /\.ts?$/, |
||||||
use: [ |
use: [ |
||||||
//{ loader: 'babel-loader', options: require('./babel.config') },
|
// { loader: 'babel-loader', options: require('./babel.config') },
|
||||||
'ts-loader', |
'ts-loader', |
||||||
{loader: 'ifdef-loader', options: opts} |
{loader: 'ifdef-loader', options: opts}, |
||||||
], |
], |
||||||
exclude: /node_modules/, |
exclude: /node_modules/, |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
test: /\.hbs$/, |
test: /\.hbs$/, |
||||||
loader: 'handlebars-loader', |
loader: 'handlebars-loader', |
||||||
options: { |
options: { |
||||||
helperDirs: __dirname + '/handlebarsHelpers' |
helperDirs: __dirname + '/handlebarsHelpers', |
||||||
} |
}, |
||||||
// loader: 'handlebars-loader?helperDirs[]=' + __dirname + '/handlebarsHelpers',
|
// loader: 'handlebars-loader?helperDirs[]=' + __dirname + '/handlebarsHelpers',
|
||||||
// use: [
|
// use: [
|
||||||
// 'handlebars-loader'
|
// 'handlebars-loader'
|
||||||
// ]
|
// ]
|
||||||
} |
}, |
||||||
], |
], |
||||||
}, |
}, |
||||||
|
|
||||||
resolve: { |
resolve: { |
||||||
extensions: ['.ts', '.js'], |
extensions: ['.ts', '.js'], |
||||||
}, |
}, |
||||||
|
|
||||||
entry: './src/index.ts', |
entry: './src/index.ts', |
||||||
// entry: {
|
// entry: {
|
||||||
// index: './src/index.ts',
|
// index: './src/index.ts',
|
||||||
// // sw: {import: './src/lib/serviceWorker/index.service.ts', filename: 'sw.js'}
|
// // sw: {import: './src/lib/serviceWorker/index.service.ts', filename: 'sw.js'}
|
||||||
// },
|
// },
|
||||||
/* entry: { |
/* entry: { |
||||||
index: './src/index.ts', |
index: './src/index.ts', |
||||||
pluralPolyfill: './src/lib/pluralPolyfill.ts' |
pluralPolyfill: './src/lib/pluralPolyfill.ts' |
||||||
}, */ |
}, */ |
||||||
//devtool: 'inline-source-map',
|
// devtool: 'inline-source-map',
|
||||||
|
|
||||||
output: { |
output: { |
||||||
globalObject: 'this', |
globalObject: 'this', |
||||||
path: path.resolve(__dirname, 'public'), |
path: path.resolve(__dirname, 'public'), |
||||||
filename: devMode ? '[name].bundle.js' : '[name].[chunkhash].bundle.js', |
filename: devMode ? '[name].bundle.js' : '[name].[chunkhash].bundle.js', |
||||||
chunkFilename: devMode ? '[name].chunk.js' : '[name].[chunkhash].chunk.js', |
chunkFilename: devMode ? '[name].chunk.js' : '[name].[chunkhash].chunk.js', |
||||||
|
|
||||||
// Webpack 5
|
// Webpack 5
|
||||||
clean: { |
clean: { |
||||||
keep: keepAsset, |
keep: keepAsset, |
||||||
} |
}, |
||||||
}, |
}, |
||||||
|
|
||||||
devServer: { |
devServer: { |
||||||
// Webpack 4 options
|
// Webpack 4 options
|
||||||
// contentBase: path.join(__dirname, 'public'),
|
// contentBase: path.join(__dirname, 'public'),
|
||||||
// watchContentBase: true,
|
// watchContentBase: true,
|
||||||
// before: useLocal ? undefined : function(app, server, compiler) {
|
// before: useLocal ? undefined : function(app, server, compiler) {
|
||||||
// app.use(middleware);
|
// app.use(middleware);
|
||||||
// },
|
// },
|
||||||
// public: useLocal ? undefined : domain,
|
// public: useLocal ? undefined : domain,
|
||||||
// sockHost: useLocal ? undefined : domain,
|
// sockHost: useLocal ? undefined : domain,
|
||||||
// overlay: true,
|
// overlay: true,
|
||||||
|
|
||||||
// static: {
|
// static: {
|
||||||
// directory: path.join(__dirname, 'public')
|
// directory: path.join(__dirname, 'public')
|
||||||
// },
|
// },
|
||||||
compress: true, |
compress: true, |
||||||
http2: useLocalNotLocal ? true : (useLocal ? undefined : true), |
http2: useLocalNotLocal ? true : (useLocal ? undefined : true), |
||||||
https: useLocal ? undefined : { |
https: useLocal ? undefined : { |
||||||
key: fs.readFileSync(__dirname + '/certs/server-key.pem', 'utf8'), |
key: fs.readFileSync(__dirname + '/certs/server-key.pem', 'utf8'), |
||||||
cert: fs.readFileSync(__dirname + '/certs/server-cert.pem', 'utf8') |
cert: fs.readFileSync(__dirname + '/certs/server-cert.pem', 'utf8'), |
||||||
}, |
}, |
||||||
allowedHosts: useLocal ? undefined : [ |
allowedHosts: useLocal ? undefined : [ |
||||||
domain |
domain, |
||||||
], |
], |
||||||
host: useLocalNotLocal ? localIp : (useLocal ? undefined : '0.0.0.0'), |
host: useLocalNotLocal ? localIp : (useLocal ? undefined : '0.0.0.0'), |
||||||
//host: domain, // '0.0.0.0'
|
// host: domain, // '0.0.0.0'
|
||||||
port: useLocal ? undefined : 443, |
port: useLocal ? undefined : 443, |
||||||
|
|
||||||
|
|
||||||
// Webpack 5
|
// Webpack 5
|
||||||
hot: false, |
hot: false, |
||||||
setupMiddlewares: useLocal ? undefined : (middlewares, devServer) => { |
setupMiddlewares: useLocal ? undefined : (middlewares, devServer) => { |
||||||
middlewares.push(middleware); |
middlewares.push(middleware); |
||||||
|
|
||||||
return middlewares; |
return middlewares; |
||||||
}, |
}, |
||||||
client: { |
client: { |
||||||
overlay: true, |
overlay: true, |
||||||
progress: false |
progress: false, |
||||||
}, |
}, |
||||||
}, |
}, |
||||||
|
|
||||||
plugins: [ |
plugins: [ |
||||||
devMode ? undefined : new BundleAnalyzerPlugin({ |
devMode ? undefined : new BundleAnalyzerPlugin({ |
||||||
analyzerMode: 'static', |
analyzerMode: 'static', |
||||||
openAnalyzer: false, |
openAnalyzer: false, |
||||||
generateStatsFile: false, |
generateStatsFile: false, |
||||||
defaultSizes: 'gzip' |
defaultSizes: 'gzip', |
||||||
}), |
}), |
||||||
|
|
||||||
new Dotenv(), |
new Dotenv(), |
||||||
|
|
||||||
// new ServiceWorkerWebpackPlugin({
|
// new ServiceWorkerWebpackPlugin({
|
||||||
// entry: path.join(__dirname, 'src/lib/serviceWorker/index.service.ts'),
|
// entry: path.join(__dirname, 'src/lib/serviceWorker/index.service.ts'),
|
||||||
// filename: 'sw.js',
|
// filename: 'sw.js',
|
||||||
// //excludes: ['**/*'],
|
// //excludes: ['**/*'],
|
||||||
// includes: [
|
// includes: [
|
||||||
// '**/*.js',
|
// '**/*.js',
|
||||||
// '**/*.css',
|
// '**/*.css',
|
||||||
// '**/*.json',
|
// '**/*.json',
|
||||||
// '**/*.wasm',
|
// '**/*.wasm',
|
||||||
// '**/*.mp3',
|
// '**/*.mp3',
|
||||||
// '**/*.svg',
|
// '**/*.svg',
|
||||||
// '**/*.tgs',
|
// '**/*.tgs',
|
||||||
// '**/*.ico',
|
// '**/*.ico',
|
||||||
// '**/*.woff',
|
// '**/*.woff',
|
||||||
// '**/*.woff2',
|
// '**/*.woff2',
|
||||||
// '**/*.ttf',
|
// '**/*.ttf',
|
||||||
// '**/*.webmanifest'
|
// '**/*.webmanifest'
|
||||||
// ],
|
// ],
|
||||||
// }),
|
// }),
|
||||||
|
|
||||||
new HtmlWebpackPlugin({ |
new HtmlWebpackPlugin({ |
||||||
title: 'Telegram Web', |
title: 'Telegram Web', |
||||||
description: 'Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.', |
description: 'Telegram is a cloud-based mobile and desktop messaging app with a focus on security and speed.', |
||||||
url: 'https://web.telegram.org/k/', |
url: 'https://web.telegram.org/k/', |
||||||
filename: 'index.html', |
filename: 'index.html', |
||||||
//template: 'public/index_template.html',
|
// template: 'public/index_template.html',
|
||||||
template: 'src/index.hbs', |
template: 'src/index.hbs', |
||||||
inject: 'body', // true, 'head'
|
inject: 'body', // true, 'head'
|
||||||
scriptLoading: 'blocking', |
scriptLoading: 'blocking', |
||||||
minify: devMode ? false : { |
minify: devMode ? false : { |
||||||
removeComments: true, |
removeComments: true, |
||||||
collapseWhitespace: true, |
collapseWhitespace: true, |
||||||
removeRedundantAttributes: true, |
removeRedundantAttributes: true, |
||||||
useShortDoctype: true, |
useShortDoctype: true, |
||||||
removeEmptyAttributes: true, |
removeEmptyAttributes: true, |
||||||
removeStyleLinkTypeAttributes: true, |
removeStyleLinkTypeAttributes: true, |
||||||
keepClosingSlash: true, |
keepClosingSlash: true, |
||||||
minifyJS: true, |
minifyJS: true, |
||||||
minifyCSS: true, |
minifyCSS: true, |
||||||
minifyURLs: true |
minifyURLs: true, |
||||||
}, |
}, |
||||||
chunks: 'all', |
chunks: 'all', |
||||||
excludeChunks: [], |
excludeChunks: [], |
||||||
}), |
}), |
||||||
|
|
||||||
new HtmlWebpackInjectPreload({ |
new HtmlWebpackInjectPreload({ |
||||||
files: [ |
files: [ |
||||||
{ |
{ |
||||||
match: /(mtproto).*\.js$/, |
match: /(mtproto).*\.js$/, |
||||||
attributes: {rel: 'modulepreload'}, |
attributes: {rel: 'modulepreload'}, |
||||||
}, |
}, |
||||||
] |
], |
||||||
}), |
}), |
||||||
|
|
||||||
new MiniCssExtractPlugin({ |
new MiniCssExtractPlugin({ |
||||||
// Options similar to the same options in webpackOptions.output
|
// Options similar to the same options in webpackOptions.output
|
||||||
// both options are optional
|
// both options are optional
|
||||||
filename: '[name].[contenthash].css', |
filename: '[name].[contenthash].css', |
||||||
chunkFilename: '[id].[contenthash].css', |
chunkFilename: '[id].[contenthash].css', |
||||||
}), |
}), |
||||||
|
|
||||||
new MediaQueryPlugin({ |
new MediaQueryPlugin({ |
||||||
include: [ |
include: [ |
||||||
'style' |
'style', |
||||||
], |
], |
||||||
queries: { |
queries: { |
||||||
'only screen and (max-width: 720px)': 'mobile', |
'only screen and (max-width: 720px)': 'mobile', |
||||||
'only screen and (min-width: 721px)': 'desktop', |
'only screen and (min-width: 721px)': 'desktop', |
||||||
} |
}, |
||||||
}), |
}), |
||||||
|
|
||||||
new RetryChunkLoadPlugin({ |
new RetryChunkLoadPlugin({ |
||||||
// optional stringified function to get the cache busting query string appended to the script src
|
// optional stringified function to get the cache busting query string appended to the script src
|
||||||
// if not set will default to appending the string `?cache-bust=true`
|
// if not set will default to appending the string `?cache-bust=true`
|
||||||
cacheBust: `function() {
|
cacheBust: `function() {
|
||||||
return Date.now(); |
return Date.now(); |
||||||
}`,
|
}`,
|
||||||
// optional value to set the amount of time in milliseconds before trying to load the chunk again. Default is 0
|
// optional value to set the amount of time in milliseconds before trying to load the chunk again. Default is 0
|
||||||
retryDelay: 3000, |
retryDelay: 3000, |
||||||
// optional value to set the maximum number of retries to load the chunk. Default is 1
|
// optional value to set the maximum number of retries to load the chunk. Default is 1
|
||||||
maxRetries: 999999, |
maxRetries: 999999, |
||||||
// optional list of chunks to which retry script should be injected
|
// optional list of chunks to which retry script should be injected
|
||||||
// if not set will add retry script to all chunks that have webpack script loading
|
// if not set will add retry script to all chunks that have webpack script loading
|
||||||
//chunks: ['chunkName'],
|
// chunks: ['chunkName'],
|
||||||
// optional code to be executed in the browser context if after all retries chunk is not loaded.
|
// optional code to be executed in the browser context if after all retries chunk is not loaded.
|
||||||
// if not set - nothing will happen and error will be returned to the chunk loader.
|
// if not set - nothing will happen and error will be returned to the chunk loader.
|
||||||
//lastResortScript: "window.location.href='/500.html';",
|
// lastResortScript: "window.location.href='/500.html';",
|
||||||
}), |
}), |
||||||
].filter(Boolean), |
].filter(Boolean), |
||||||
}; |
}; |
||||||
|
|||||||
Loading…
Reference in new issue