Convert project to webpack

build/paths.js

@@ -0,0 +1,12 @@
+const path = require('path')
+
+module.exports = {
+	SRC: path.resolve(__dirname, '..', 'src'),
+	DIST: path.resolve(__dirname, '..', 'dist'),
+	ASSETS: path.resolve(__dirname, '..', 'assets'),
+	IMAGES: path.resolve(__dirname, '..', 'src/images'),
+	STYLES: path.resolve(__dirname, '..', 'src/styles'),
+	LIB: path.resolve(__dirname, '..', 'lib'),
+	MASKS: path.resolve(__dirname, '..', 'src/masks'),
+	ROOT: path.resolve(__dirname, '..')
+}

build/webpack.common.js

@@ -0,0 +1,109 @@
+const path = require('path');
+const { SRC, DIST, ASSETS, LIB } = require('./paths');
+var webpack = require("webpack");
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const SymlinkWebpackPlugin = require('symlink-webpack-plugin');
+
+module.exports = {
+	entry: {
+		app: path.resolve(SRC, 'scripts', 'app.js')
+	},
+	output: {
+    	path: DIST,
+		filename: '[name].js',
+    	publicPath: './' //meaning dist/
+	},
+	devtool: "inline-source-map",
+	module: {
+		rules: [
+			{
+				test: /\.js$/,
+				exclude: /node_modules/,
+				use: {
+					loader: 'babel-loader',
+					options: {
+						presets: ['@babel/preset-env'],
+					},
+				},
+			},
+			{
+				test: /\.html$/i,
+				loader: "html-loader",
+			},	  
+			{
+				test: /\.(woff|woff2|eot|ttf|otf)$/i,
+				type: 'asset/resource'
+			},
+			{
+				test: /\.s[ac]ss$/i,
+				use: [
+					'style-loader',
+					'css-loader',
+					'resolve-url-loader',
+					{
+						loader: 'sass-loader',
+						options: {
+							implementation: require.resolve('sass'),
+							sourceMap: true
+						}
+					}
+				]
+			},
+			{
+				test: /\.css$/i,
+				use: ["style-loader", "css-loader"],
+			},
+			{
+				test: /\.(png|svg|jpg|jpeg|gif)$/i,
+				use: {
+					loader: "url-loader",
+					options: {
+						limit: 1 * 1024,
+						//name: "images/[name].[hash:7].[ext]"
+						name: "images/[name].[ext]"
+					}
+				}
+				/*type: 'asset',
+				parser: {
+					dataUrlCondition: {
+						maxSize: 8*1024
+					}
+				}*/
+			}
+		]
+	},
+	plugins: [
+		new webpack.ProvidePlugin({
+			$: require.resolve('jquery'),
+			jQuery: require.resolve('jquery'),
+			L: require.resolve('leaflet')
+		}),
+		new HtmlWebpackPlugin({
+			template: path.resolve(LIB, 'index.php'),
+			chunks: ['index'],
+			filename: 'index.php',
+		}),
+		new CopyWebpackPlugin({
+			patterns: [{
+				from: 'geo/',
+				to: path.resolve(DIST, 'geo')
+			}]
+		}),
+		new SymlinkWebpackPlugin({ origin: '../files/', symlink: 'files' }),
+		new CleanWebpackPlugin()
+	],
+	resolve: {
+		extensions: ['', '.js'],
+		alias: {
+			'load-image': 'blueimp-load-image/js/load-image.js',
+			//'load-image-orientation': 'blueimp-load-image/js/load-image-orientation.js',
+			//'load-image-scale': 'blueimp-load-image/js/load-image-scale.js',
+			'load-image-meta': 'blueimp-load-image/js/load-image-meta.js',
+			'load-image-exif': 'blueimp-load-image/js/load-image-exif.js',
+			'canvas-to-blob': 'blueimp-canvas-to-blob/js/canvas-to-blob.js',
+			'jquery-ui/ui/widget': 'blueimp-file-upload/js/vendor/jquery.ui.widget.js'
+		}
+	}
+};

build/webpack.dev.js

@@ -0,0 +1,6 @@
+const { merge } = require('webpack-merge')
+
+module.exports = merge(require('./webpack.common.js'), {
+	mode: 'development',
+	watch: true
+})

build/webpack.prod.js

@@ -0,0 +1,5 @@
+const { merge } = require('webpack-merge')
+
+module.exports = merge(require('./webpack.common.js'), {
+	mode: 'production'
+})