- npm updates
- remove NODE_ENV from .env file, use webpack mode parameter inside webpack.config.js
This commit is contained in:
Arno Kaimbacher
parent
eb0721c681
commit
397788952b
10
.env.example
10
.env.example
|
|
@ -1,2 +1,8 @@
|
|||
NODE_ENV=
|
||||
CONSTANT_VALUE=
|
||||
CONSTANT_VALUE=1234567
|
||||
SERVICE_URL=https://geusegdi01.geus.dk/meta3d/rpc/model_meta_all?modelid=
|
||||
POINT_URL=https://geusegdi01.geus.dk/geom3d/data/nodes/
|
||||
EDGE_URL=https://geusegdi01.geus.dk/geom3d/data/triangles/
|
||||
|
||||
APP_KEY=
|
||||
MATOMO_TRACKER_URL=
|
||||
MATOMO_SITE_ID=
|
||||
|
|
@ -18,9 +18,8 @@
|
|||
// "port": 9222,
|
||||
"url": "http://localhost:8080?model_id=20",
|
||||
"webRoot": "${workspaceFolder}",
|
||||
"breakOnLoad": true,
|
||||
"runtimeExecutable": "C:/ProgramData/scoop/apps/googlechrome/current/chrome.exe",
|
||||
// "runtimeExecutable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",
|
||||
// "runtimeExecutable": "C:/ProgramData/scoop/apps/googlechrome/current/chrome.exe",
|
||||
"runtimeExecutable": "C:/Program Files/Google/Chrome/Application/chrome.exe",
|
||||
// "sourceMapPathOverrides": {
|
||||
// "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
|
||||
// "webpack:///./*": "${workspaceFolder}/*",
|
||||
|
|
|
|||
|
|
@ -224,7 +224,7 @@
|
|||
</section>
|
||||
|
||||
<script src="dist/runtime.js"></script>
|
||||
<script src="dist/vendors.js"></script>
|
||||
<script src="dist/chunk-vendors.js"></script>
|
||||
<script src="dist/main.js"></script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
1216
package-lock.json
generated
1216
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
13
package.json
13
package.json
|
|
@ -6,11 +6,11 @@
|
|||
"dependencies": {
|
||||
"@fontsource/open-sans": "^4.5.11",
|
||||
"@fortawesome/fontawesome-free": "^6.1.2",
|
||||
"@types/three": "^0.143.2",
|
||||
"@types/three": "^0.144.0",
|
||||
"bulma": "^0.9.2",
|
||||
"lodash": "^4.17.21",
|
||||
"proj4": "^2.6.3",
|
||||
"three": "^0.143.0"
|
||||
"three": "^0.144.0"
|
||||
},
|
||||
"author": "Arno Kaimbacher",
|
||||
"license": "MIT",
|
||||
|
|
@ -37,15 +37,16 @@
|
|||
"url-loader": "^4.1.1",
|
||||
"webpack": "^5.7.0",
|
||||
"webpack-cli": "^4.2.0",
|
||||
"webpack-merge": "^5.4.0"
|
||||
"webpack-manifest-plugin": "^5.0.0",
|
||||
"webpack-merge": "^5.4.0",
|
||||
"webpack-nano": "^1.1.1"
|
||||
},
|
||||
"scripts": {
|
||||
"babel": "babel --presets es2015 js/main.js -o build/main.bundle.js",
|
||||
"serve": "http-server",
|
||||
"prod": "rm -rf dist && webpack --progress --mode=production",
|
||||
"prod_serve": "concurrently \"npm run serve\" \"npx webpack --progress --mode=production --watch\" ",
|
||||
"dev_serve": "concurrently \"npm run serve\" \"npx webpack --progress --mode=development --watch\" ",
|
||||
"dev": "rm -rf dist && npx webpack --progress --mode=development --watch"
|
||||
"prod_serve": "rm -rf dist && concurrently \"npm run serve\" \"npx webpack --progress --mode=production\" ",
|
||||
"dev": "rm -rf dist && concurrently \"npm run serve\" \"npx webpack --progress --mode=development --watch\" "
|
||||
},
|
||||
"keywords": [
|
||||
"3D",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import * as util from '../core/utilities';
|
|||
import * as domEvent from '../core/domEvent';
|
||||
import * as dom from '../core/domUtil';
|
||||
import { BarChart } from '../core/BarChart';
|
||||
import { Map } from "../core/Map";
|
||||
|
||||
import './BoreholePopup.css';
|
||||
|
||||
|
|
@ -19,7 +20,7 @@ export class BoreholePopup extends Control {
|
|||
position: 'topleft',
|
||||
width: '300px',
|
||||
height: '100%',
|
||||
parentDiv: null
|
||||
parentDiv: undefined
|
||||
};
|
||||
_source;
|
||||
|
||||
|
|
@ -41,7 +42,7 @@ export class BoreholePopup extends Control {
|
|||
}
|
||||
|
||||
// happens after added to map
|
||||
onAdd(map) {
|
||||
onAdd(map: Map) {
|
||||
if (!map) {
|
||||
// this.destroy();
|
||||
//logger.warning('HomeButton::map required', true);
|
||||
|
|
@ -108,13 +109,13 @@ export class BoreholePopup extends Control {
|
|||
}
|
||||
}
|
||||
|
||||
show() {
|
||||
show(): void {
|
||||
//this._clearContent();
|
||||
this._toggleVisibility(true);
|
||||
//this._animate(true);
|
||||
}
|
||||
|
||||
hide() {
|
||||
hide(): void {
|
||||
//var test = this._isShowing;
|
||||
if (this._isShowing) {
|
||||
(this._toggleVisibility(false));
|
||||
|
|
@ -124,7 +125,7 @@ export class BoreholePopup extends Control {
|
|||
//}
|
||||
}
|
||||
|
||||
setContent(innerHTML) {
|
||||
setContent(innerHTML): void {
|
||||
if (innerHTML instanceof HTMLElement) {
|
||||
this._contentPane.innerHTML = "";
|
||||
this._contentPane.appendChild(innerHTML);
|
||||
|
|
@ -135,7 +136,7 @@ export class BoreholePopup extends Control {
|
|||
this._contentPane.style.display = "block";
|
||||
}
|
||||
|
||||
setChartContent(data) {
|
||||
setChartContent(data): void {
|
||||
this._contentPane.innerHTML = "";
|
||||
|
||||
let valTextColor = "ffffff";
|
||||
|
|
@ -149,17 +150,17 @@ export class BoreholePopup extends Control {
|
|||
this._contentPane.appendChild(table);
|
||||
}
|
||||
|
||||
close() {
|
||||
close(): void {
|
||||
this._clearContent();
|
||||
this._toggleVisibility(false);
|
||||
this.emit("closed");
|
||||
}
|
||||
|
||||
private _clearContent() {
|
||||
private _clearContent(): void {
|
||||
this._contentPane.innerHTML = '';
|
||||
}
|
||||
|
||||
private _toggleVisibility(visible) {
|
||||
private _toggleVisibility(visible: boolean): void {
|
||||
this._setVisibility(visible);
|
||||
this._isShowing = visible;
|
||||
|
||||
|
|
@ -171,19 +172,22 @@ export class BoreholePopup extends Control {
|
|||
// let analysisTabContent = document.querySelector('.tab-pane.content-file');
|
||||
// if it's not the analysis tab, make it active
|
||||
if (analysisTabButton !== activeTabButton) {
|
||||
activeTabButton.classList.remove('is-active');
|
||||
analysisTabButton.classList.add('is-active');
|
||||
activeTabButton?.classList.remove('is-active');
|
||||
analysisTabButton?.classList.add('is-active');
|
||||
|
||||
document.querySelector(activeTabButton.getAttribute('name')).classList.remove('active');
|
||||
document.querySelector(analysisTabButton.getAttribute('name')).classList.add('active');
|
||||
let activeNameAttribute = activeTabButton?.getAttribute('name');
|
||||
(activeNameAttribute) && document.querySelector(activeNameAttribute)?.classList.remove('active');
|
||||
|
||||
let analysisNameAttribute = analysisTabButton?.getAttribute('name');
|
||||
(analysisNameAttribute) && document.querySelector(analysisNameAttribute)?.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
private _setVisibility(addOrRemove) {
|
||||
private _setVisibility(addOrRemove: boolean) :void {
|
||||
this._menu.style.visibility = addOrRemove ? "visible" : "hidden";
|
||||
}
|
||||
|
||||
onRemove() {
|
||||
onRemove(): void {
|
||||
//this.cleanup();
|
||||
this._isShowing && this.hide();
|
||||
//for (var i = 0; i < this._eventConnections.length; i ++)
|
||||
|
|
|
|||
|
|
@ -1,31 +1,40 @@
|
|||
require('dotenv').config();
|
||||
const path = require('path');
|
||||
const webpack = require('webpack'); //e.g. for iusing DefinePlugin
|
||||
require("dotenv").config();
|
||||
const path = require("path");
|
||||
const webpack = require("webpack"); //e.g. for iusing DefinePlugin
|
||||
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
|
||||
const TerserPlugin = require('terser-webpack-plugin');
|
||||
const TerserPlugin = require("terser-webpack-plugin");
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
|
||||
// const { VueLoaderPlugin } = require('vue-loader');
|
||||
|
||||
/**
|
||||
* flag Used to check if the environment is production or not
|
||||
*/
|
||||
const isProduction = (process.env.NODE_ENV === 'production');
|
||||
const devMode = (process.env.NODE_ENV !== 'production');
|
||||
// const isProduction = (process.env.NODE_ENV === 'production');
|
||||
// const devMode = (process.env.NODE_ENV !== 'production');
|
||||
|
||||
/**
|
||||
* Include hash to filenames for cache busting - only at production
|
||||
*/
|
||||
const fileNamePrefix = isProduction ? '[chunkhash].' : '';
|
||||
// const fileNamePrefix = isProduction ? "[chunkhash]." : "";
|
||||
|
||||
module.exports = {
|
||||
mode: process.env.NODE_ENV,
|
||||
let isProduction, devMode;
|
||||
|
||||
module.exports = (env, argv) => {
|
||||
isProduction = argv.mode === "production";
|
||||
devMode = argv.mode !== "production";
|
||||
// const fileNamePrefix = isProduction ? "[chunkhash]." : "";
|
||||
|
||||
console.log(`This is the Webpack 5 'mode': ${argv.mode}`);
|
||||
return {
|
||||
// mode: process.env.NODE_ENV,
|
||||
context: __dirname,
|
||||
entry: './src/js/main.js',
|
||||
entry: "./src/js/main.js",
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
filename: '[name].js',
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
filename: "[name].js",
|
||||
// filename: fileNamePrefix + '[name].js',
|
||||
publicPath: '/dist/',
|
||||
publicPath: "/dist/",
|
||||
},
|
||||
// resolve: {
|
||||
// alias: {
|
||||
|
|
@ -73,18 +82,21 @@ module.exports = {
|
|||
test: /\.(js|jsx|tsx|ts)$/,
|
||||
exclude: /(node_modules|bower_components)/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
loader: "babel-loader",
|
||||
// options: {
|
||||
// presets: ['@babel/preset-env']
|
||||
// }
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
test: /\.(scss|css)$/,
|
||||
use: [
|
||||
{
|
||||
loader: (isProduction === true) ? MiniCssExtractPlugin.loader : 'style-loader',
|
||||
loader:
|
||||
isProduction === true
|
||||
? MiniCssExtractPlugin.loader
|
||||
: "style-loader",
|
||||
// loader: 'style-loader',
|
||||
// loader: MiniCssExtractPlugin.loader,
|
||||
// options: {
|
||||
|
|
@ -101,8 +113,8 @@ module.exports = {
|
|||
{
|
||||
loader: "css-loader",
|
||||
options: {
|
||||
sourceMap: true
|
||||
}
|
||||
sourceMap: true,
|
||||
},
|
||||
},
|
||||
// {
|
||||
// loader: 'resolve-url-loader',
|
||||
|
|
@ -111,52 +123,40 @@ module.exports = {
|
|||
{
|
||||
loader: "sass-loader",
|
||||
options: {
|
||||
sourceMap: true
|
||||
}
|
||||
}
|
||||
]
|
||||
sourceMap: true,
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['*', '.js', '.jsx', '.tsx', '.ts'],
|
||||
extensions: ["*", ".js", ".jsx", ".tsx", ".ts"],
|
||||
},
|
||||
stats: {
|
||||
colors: true
|
||||
colors: true,
|
||||
},
|
||||
devtool: (isProduction === true) ? 'hidden-source-map' : 'inline-source-map',
|
||||
// devtool: (isProduction === true) ? 'hidden-source-map' : 'inline-source-map',
|
||||
devtool: (isProduction === true) ? 'hidden-source-map' : 'eval',
|
||||
|
||||
optimization: {
|
||||
minimize: isProduction,
|
||||
minimizer: [
|
||||
new TerserPlugin({
|
||||
// cache: true,
|
||||
parallel: true,
|
||||
// sourceMap: true, // Must be set to true if using source-maps in production
|
||||
extractComments: true,
|
||||
terserOptions: {
|
||||
|
||||
compress: {
|
||||
directives: false,
|
||||
// drop_console: true,
|
||||
// drop_debugger: true,
|
||||
// keep_classnames: false,
|
||||
// keep_fnames: false,
|
||||
},
|
||||
mangle: true, // Note `mangle.properties` is `false` by default.
|
||||
keep_classnames: false,
|
||||
keep_fnames: false,
|
||||
}
|
||||
})
|
||||
],
|
||||
runtimeChunk: 'single',
|
||||
runtimeChunk: "single",
|
||||
splitChunks: {
|
||||
cacheGroups: {
|
||||
vendor: {
|
||||
defaultVendors: {
|
||||
test: /[\\\/]node_modules[\\\/]/,
|
||||
name: 'vendors',
|
||||
chunks: 'all'
|
||||
name: "chunk-vendors",
|
||||
// chunks: 'all',
|
||||
priority: -10,
|
||||
chunks: "initial",
|
||||
},
|
||||
common: {
|
||||
name: "chunk-common",
|
||||
minChunks: 2,
|
||||
priority: -20,
|
||||
chunks: "initial",
|
||||
reuseExistingChunk: true,
|
||||
},
|
||||
// styles: {
|
||||
// name: 'styles',
|
||||
|
|
@ -164,14 +164,61 @@ module.exports = {
|
|||
// chunks: 'all',
|
||||
// enforce: true
|
||||
// }
|
||||
}
|
||||
},
|
||||
},
|
||||
minimizer: [
|
||||
new TerserPlugin({
|
||||
// cache: true,
|
||||
parallel: true,
|
||||
// sourceMap: true, // Must be set to true if using source-maps in production
|
||||
extractComments: true,
|
||||
terserOptions: {
|
||||
// compress: {
|
||||
// directives: false,
|
||||
// // drop_console: true,
|
||||
// // drop_debugger: true,
|
||||
// // keep_classnames: false,
|
||||
// // keep_fnames: false,
|
||||
// },
|
||||
compress: {
|
||||
directives: false,
|
||||
arrows: true,
|
||||
collapse_vars: true,
|
||||
comparisons: true,
|
||||
computed_props: true,
|
||||
hoist_funs: true,
|
||||
hoist_props: true,
|
||||
hoist_vars: true,
|
||||
inline: true,
|
||||
loops: true,
|
||||
negate_iife: true,
|
||||
properties: true,
|
||||
reduce_funcs: true,
|
||||
reduce_vars: true,
|
||||
switches: true,
|
||||
toplevel: true,
|
||||
typeofs: true,
|
||||
booleans: true,
|
||||
if_return: true,
|
||||
sequences: true,
|
||||
unused: true,
|
||||
conditionals: true,
|
||||
dead_code: false,
|
||||
evaluate: true,
|
||||
},
|
||||
mangle: true, // Note `mangle.properties` is `false` by default.
|
||||
keep_classnames: false,
|
||||
keep_fnames: false,
|
||||
},
|
||||
}),
|
||||
],
|
||||
},
|
||||
|
||||
plugins: [
|
||||
// new VueLoaderPlugin(),
|
||||
|
||||
new webpack.DefinePlugin({ // Remove this plugin if you don't plan to define any global constants
|
||||
new webpack.DefinePlugin({
|
||||
// Remove this plugin if you don't plan to define any global constants
|
||||
ENVIRONMENT: JSON.stringify(process.env.NODE_ENV),
|
||||
CONSTANT_VALUE: JSON.stringify(process.env.CONSTANT_VALUE),
|
||||
MATOMO_SITE_ID: JSON.stringify(process.env.MATOMO_SITE_ID),
|
||||
|
|
@ -180,17 +227,18 @@ module.exports = {
|
|||
POINT_URL: JSON.stringify(process.env.POINT_URL),
|
||||
EDGE_URL: JSON.stringify(process.env.EDGE_URL),
|
||||
|
||||
CUSTOM_VAR: JSON.stringify('value5 goes here'), // no quotes needed, string value
|
||||
CUSTOM_VAR: JSON.stringify("value5 goes here"), // no quotes needed, string value
|
||||
}),
|
||||
// extractLess,
|
||||
|
||||
new MiniCssExtractPlugin({ // Make sure MiniCssExtractPlugin instance is included in array before the PurifyCSSPlugin
|
||||
new MiniCssExtractPlugin({
|
||||
// Make sure MiniCssExtractPlugin instance is included in array before the PurifyCSSPlugin
|
||||
// Options similar to the same options in webpackOptions.output
|
||||
// both options are optional
|
||||
// filename: '[name].css',
|
||||
// chunkFilename: '[id].css',
|
||||
filename: '[name].css',
|
||||
chunkFilename: '[id].css',
|
||||
filename: "[name].css",
|
||||
chunkFilename: "[id].css",
|
||||
}),
|
||||
|
||||
// new PurifyCSSPlugin({
|
||||
|
|
@ -198,33 +246,13 @@ module.exports = {
|
|||
// minimize: true,
|
||||
// }),
|
||||
|
||||
// new webpack.HotModuleReplacementPlugin(),
|
||||
],
|
||||
(isProduction) && new WebpackManifestPlugin({
|
||||
fileName: 'manifest.json'
|
||||
}),
|
||||
|
||||
//auto updating on webpack dev server
|
||||
(devMode) && new webpack.HotModuleReplacementPlugin() // HMR plugin will cause problems with [chunkhash]
|
||||
|
||||
].filter(Boolean),
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Production only plugins
|
||||
*/
|
||||
if (isProduction === true) {
|
||||
module.exports.plugins.push(
|
||||
// module.exports.optimization.minimizer.push(
|
||||
// new UglifyJsPlugin({ sourceMap: true })
|
||||
// );
|
||||
// function () { // Create a manifest.json file that contain the hashed file names of generated static resources
|
||||
// this.plugin("done", function (status) {
|
||||
// require("fs").writeFileSync(
|
||||
// __dirname + "/dist/manifest.json",
|
||||
// JSON.stringify(status.toJson().assetsByChunkName)
|
||||
// );
|
||||
// });
|
||||
// },
|
||||
|
||||
);
|
||||
//development
|
||||
} else {
|
||||
module.exports.plugins.push(
|
||||
//auto updating on dev server
|
||||
new webpack.HotModuleReplacementPlugin()// HMR plugin will cause problems with [chunkhash]
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user