285 lines
8.2 KiB
JavaScript
285 lines
8.2 KiB
JavaScript
const path = require('path');
|
|
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
|
const MediaQueryPlugin = require('media-query-plugin');
|
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
|
const postcssPresetEnv = require('postcss-preset-env');
|
|
const ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin');
|
|
const { RetryChunkLoadPlugin } = require('webpack-retry-chunk-load-plugin');
|
|
const fs = require('fs');
|
|
const Dotenv = require('dotenv-webpack');
|
|
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
|
|
|
|
const allowedIPs = ['127.0.0.1'];
|
|
const devMode = process.env.NODE_ENV !== 'production';
|
|
const useLocal = true;
|
|
const useLocalNotLocal = false;
|
|
|
|
if(devMode) {
|
|
console.log('DEVMODE IS ON!');
|
|
}
|
|
|
|
const MTPROTO_HTTP = false;
|
|
const MTPROTO_AUTO = true;
|
|
|
|
const opts = {
|
|
MTPROTO_WORKER: true,
|
|
MTPROTO_SW: false,
|
|
MTPROTO_HTTP: MTPROTO_HTTP,
|
|
MTPROTO_HTTP_UPLOAD: false,
|
|
MTPROTO_AUTO: MTPROTO_AUTO, // use HTTPS when WS is unavailable
|
|
MTPROTO_HAS_HTTP: MTPROTO_AUTO || MTPROTO_HTTP,
|
|
MTPROTO_HAS_WS: MTPROTO_AUTO || !MTPROTO_HTTP,
|
|
DEBUG: devMode,
|
|
version: 3,
|
|
'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-fill-with-blanks': true // add this to remove code with blank spaces instead of "//" comments
|
|
};
|
|
|
|
const domain = 'yourdomain.com';
|
|
const localIp = '10.77.0.84';
|
|
|
|
const middleware = (req, res, next) => {
|
|
let IP = '';
|
|
if(req.headers['cf-connecting-ip']) {
|
|
IP = req.headers['cf-connecting-ip'];
|
|
} else {
|
|
IP = req.connection.remoteAddress.split(':').pop();
|
|
}
|
|
|
|
if(!allowedIPs.includes(IP) && !/^192\.168\.\d{1,3}\.\d{1,3}$/.test(IP)) {
|
|
console.log('Bad IP connecting: ' + IP, req.url);
|
|
res.status(404).send('Nothing interesting here.');
|
|
} else {
|
|
if(req.url.indexOf('/assets/') !== 0) {
|
|
console.log(req.url, IP);
|
|
}
|
|
|
|
next();
|
|
}
|
|
};
|
|
|
|
module.exports = {
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /\.scss$/,
|
|
use: [
|
|
devMode ? 'style-loader' : MiniCssExtractPlugin.loader,/* {
|
|
loader: MiniCssExtractPlugin.loader,
|
|
options: {
|
|
hmr: devMode,
|
|
reloadAll: true,
|
|
}
|
|
}, */
|
|
|
|
// Webpack 4
|
|
'css-loader?url=false',
|
|
// Webpack 5
|
|
// {
|
|
// loader: 'css-loader',
|
|
// options: {
|
|
// url: false
|
|
// }
|
|
// },
|
|
|
|
devMode ? undefined : MediaQueryPlugin.loader,
|
|
{
|
|
loader: 'postcss-loader',
|
|
options: {
|
|
// Webpack 4
|
|
ident: 'postcss',
|
|
plugins: [
|
|
postcssPresetEnv(),
|
|
],
|
|
|
|
// Webpack 5
|
|
// postcssOptions: {
|
|
// plugins: [
|
|
// postcssPresetEnv(),
|
|
// ]
|
|
// }
|
|
}
|
|
},
|
|
{
|
|
loader: 'sass-loader',
|
|
options: {
|
|
sourceMap: devMode
|
|
}
|
|
}
|
|
].filter(Boolean)
|
|
},
|
|
{
|
|
test: /\.ts?$/,
|
|
use: [
|
|
//{ loader: 'babel-loader', options: require('./babel.config') },
|
|
'ts-loader',
|
|
{loader: 'ifdef-loader', options: opts}
|
|
],
|
|
exclude: /node_modules/,
|
|
},
|
|
{
|
|
test: /\.hbs$/,
|
|
use: [
|
|
'handlebars-loader'
|
|
]
|
|
}
|
|
],
|
|
},
|
|
|
|
resolve: {
|
|
extensions: ['.ts', '.js'],
|
|
},
|
|
|
|
entry: './src/index.ts',
|
|
// entry: {
|
|
// index: './src/index.ts',
|
|
// sw: {import: './src/lib/serviceWorker/index.service.ts', filename: 'sw.js'}
|
|
// },
|
|
/* entry: {
|
|
index: './src/index.ts',
|
|
pluralPolyfill: './src/lib/pluralPolyfill.ts'
|
|
}, */
|
|
//devtool: 'inline-source-map',
|
|
|
|
output: {
|
|
globalObject: 'this',
|
|
path: path.resolve(__dirname, 'public'),
|
|
filename: '[name].[chunkhash].bundle.js',
|
|
chunkFilename: '[name].[chunkhash].chunk.js',
|
|
|
|
// Webpack 5
|
|
// clean: {
|
|
// keep: keepAsset,
|
|
// }
|
|
},
|
|
|
|
devServer: {
|
|
// Webpack 4 options
|
|
contentBase: path.join(__dirname, 'public'),
|
|
watchContentBase: true,
|
|
before: useLocal ? undefined : function(app, server, compiler) {
|
|
app.use(middleware);
|
|
},
|
|
public: useLocal ? undefined : domain,
|
|
sockHost: useLocal ? undefined : domain,
|
|
overlay: true,
|
|
|
|
// static: {
|
|
// directory: path.join(__dirname, 'public')
|
|
// },
|
|
// hot: false,
|
|
compress: true,
|
|
http2: useLocalNotLocal ? true : (useLocal ? undefined : true),
|
|
https: useLocal ? undefined : {
|
|
key: fs.readFileSync(__dirname + '/certs/server-key.pem', 'utf8'),
|
|
cert: fs.readFileSync(__dirname + '/certs/server-cert.pem', 'utf8')
|
|
},
|
|
allowedHosts: useLocal ? undefined : [
|
|
domain
|
|
],
|
|
host: useLocalNotLocal ? localIp : (useLocal ? undefined : '0.0.0.0'),
|
|
//host: domain, // '0.0.0.0'
|
|
port: useLocal ? undefined : 443,
|
|
|
|
|
|
// Webpack 5
|
|
// setupMiddlewares: useLocal ? undefined : (middlewares, devServer) => {
|
|
// middlewares.push(middleware);
|
|
|
|
// return middlewares;
|
|
// },
|
|
// client: {
|
|
// overlay: true,
|
|
// progress: true
|
|
// },
|
|
},
|
|
|
|
plugins: [
|
|
devMode ? undefined : new BundleAnalyzerPlugin({
|
|
analyzerMode: 'static',
|
|
openAnalyzer: false,
|
|
generateStatsFile: false,
|
|
defaultSizes: 'gzip'
|
|
}),
|
|
|
|
new Dotenv(),
|
|
|
|
new ServiceWorkerWebpackPlugin({
|
|
entry: path.join(__dirname, 'src/lib/serviceWorker/index.service.ts'),
|
|
filename: 'sw.js',
|
|
//excludes: ['**/*'],
|
|
includes: [
|
|
'**/*.js',
|
|
'**/*.css',
|
|
'**/*.json',
|
|
'**/*.wasm',
|
|
'**/*.mp3',
|
|
'**/*.svg',
|
|
'**/*.tgs',
|
|
'**/*.ico',
|
|
'**/*.woff',
|
|
'**/*.woff2',
|
|
'**/*.ttf',
|
|
'**/*.webmanifest'
|
|
],
|
|
}),
|
|
|
|
new HtmlWebpackPlugin({
|
|
filename: `index.html`,
|
|
//template: 'public/index_template.html',
|
|
template: 'src/index.hbs',
|
|
inject: false, // true, 'head'
|
|
minify: {
|
|
removeComments: true,
|
|
collapseWhitespace: true,
|
|
removeRedundantAttributes: true,
|
|
useShortDoctype: true,
|
|
removeEmptyAttributes: true,
|
|
removeStyleLinkTypeAttributes: true,
|
|
keepClosingSlash: true,
|
|
minifyJS: true,
|
|
minifyCSS: true,
|
|
minifyURLs: true
|
|
},
|
|
chunks: 'all',
|
|
excludeChunks: []
|
|
}),
|
|
|
|
new MiniCssExtractPlugin({
|
|
// Options similar to the same options in webpackOptions.output
|
|
// both options are optional
|
|
filename: '[name].[contenthash].css',
|
|
chunkFilename: '[id].[contenthash].css',
|
|
}),
|
|
|
|
new MediaQueryPlugin({
|
|
include: [
|
|
'style'
|
|
],
|
|
queries: {
|
|
'only screen and (max-width: 720px)': 'mobile',
|
|
'only screen and (min-width: 721px)': 'desktop',
|
|
}
|
|
}),
|
|
|
|
new RetryChunkLoadPlugin({
|
|
// 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`
|
|
cacheBust: `function() {
|
|
return Date.now();
|
|
}`,
|
|
// optional value to set the amount of time in milliseconds before trying to load the chunk again. Default is 0
|
|
retryDelay: 3000,
|
|
// optional value to set the maximum number of retries to load the chunk. Default is 1
|
|
maxRetries: 999999,
|
|
// 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
|
|
//chunks: ['chunkName'],
|
|
// 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.
|
|
//lastResortScript: "window.location.href='/500.html';",
|
|
}),
|
|
].filter(Boolean),
|
|
};
|