From e0f5a75b2ac0d0dbc60e0e31debfbdd0b8ca15d6 Mon Sep 17 00:00:00 2001 From: Matteo Gheza Date: Wed, 7 Oct 2020 22:49:51 +0200 Subject: [PATCH] Webpack code spliting and map marker style fix --- server/prova.php | 12 ++++++++++-- server/resources/ajax/ajax_admin_list.php | 2 +- server/resources/src/font-awesome.scss | 2 ++ server/resources/src/{src.js => main.js} | 16 ++------------- server/resources/src/maps.js | 11 +++++++++++ server/resources/webpack.config.js | 24 +++++++++++++++++++---- 6 files changed, 46 insertions(+), 21 deletions(-) create mode 100644 server/resources/src/font-awesome.scss rename server/resources/src/{src.js => main.js} (72%) create mode 100644 server/resources/src/maps.js diff --git a/server/prova.php b/server/prova.php index fce4615..2cc7c21 100644 --- a/server/prova.php +++ b/server/prova.php @@ -7,6 +7,7 @@ init_class(false); Location picker example + \ No newline at end of file diff --git a/server/resources/ajax/ajax_admin_list.php b/server/resources/ajax/ajax_admin_list.php index f0f3b14..ddf0ec3 100644 --- a/server/resources/ajax/ajax_admin_list.php +++ b/server/resources/ajax/ajax_admin_list.php @@ -79,7 +79,7 @@ th, td { "; $nome_url = urlencode($row['name']); - echo " "; + echo " "; $services = $row['services']; $minutes = $row['availability_minutes']; diff --git a/server/resources/src/font-awesome.scss b/server/resources/src/font-awesome.scss new file mode 100644 index 0000000..b6be54c --- /dev/null +++ b/server/resources/src/font-awesome.scss @@ -0,0 +1,2 @@ +$fa-font-path: "~font-awesome/fonts"; +@import '~font-awesome/scss/font-awesome.scss'; \ No newline at end of file diff --git a/server/resources/src/src.js b/server/resources/src/main.js similarity index 72% rename from server/resources/src/src.js rename to server/resources/src/main.js index 3194038..2155d1b 100644 --- a/server/resources/src/src.js +++ b/server/resources/src/main.js @@ -1,23 +1,11 @@ +jQuery = $; window.$ = window.jQuery = $; import 'bootstrap'; import 'bootstrap/dist/css/bootstrap.min.css'; -import '../node_modules/@fortawesome/fontawesome-free/css/all.css'; -import '../node_modules/@fortawesome/fontawesome-free/js/all.js'; // thanks to https://medium.com/@bshelling/use-fontawesome-with-webpack-24f629d7b962 and https://stackoverflow.com/questions/52376720/how-to-make-font-awesome-5-work-with-webpack +import './font-awesome.scss'; import '../node_modules/bootstrap-cookie-alert/cookiealert.css'; // TODO: migrate to Bootstrap Italia import pickadate from 'pickadate' -import L from 'leaflet'; -import 'leaflet.locatecontrol'; -import '../node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.css' -import '../node_modules/leaflet/dist/leaflet.css'; - -delete L.Icon.Default.prototype._getIconUrl; -L.Icon.Default.mergeOptions({ - iconRetinaUrl: 'resources/dist/marker-icon-2x.png', - iconUrl: 'resources/dist/marker-icon.png', - shadowUrl: 'resources/dist/marker-shadow.png', -}); - $( document ).ready(function() { // From https://github.com/Wruczek/Bootstrap-Cookie-Alert/blob/gh-pages/cookiealert.js var cookieAlert = document.querySelector(".cookiealert"); diff --git a/server/resources/src/maps.js b/server/resources/src/maps.js new file mode 100644 index 0000000..d37e8d7 --- /dev/null +++ b/server/resources/src/maps.js @@ -0,0 +1,11 @@ +import L from 'leaflet'; +import 'leaflet.locatecontrol'; +import '../node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.css' +import '../node_modules/leaflet/dist/leaflet.css'; + +delete L.Icon.Default.prototype._getIconUrl; +L.Icon.Default.mergeOptions({ + iconRetinaUrl: 'resources/dist/marker-icon-2x.png', + iconUrl: 'resources/dist/marker-icon.png', + shadowUrl: 'resources/dist/marker-shadow.png', +}); \ No newline at end of file diff --git a/server/resources/webpack.config.js b/server/resources/webpack.config.js index f0ab790..4621653 100644 --- a/server/resources/webpack.config.js +++ b/server/resources/webpack.config.js @@ -3,9 +3,12 @@ var webpack = require('webpack'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { - entry: './src/src.js', + entry: { + main: path.resolve(__dirname, './src/main.js'), + maps: path.resolve(__dirname, 'src/maps.js') + }, output: { - filename: 'main.js', + filename: '[name].js', path: path.resolve(__dirname, 'dist'), }, module: { @@ -33,7 +36,7 @@ module.exports = { }, }, { - test: /\.(woff(2)?|ttf|eot|svg|png|jpg)(\?v=\d+\.\d+\.\d+)?$/, + test: /\.(gif|png|jpg)(\?v=\d+\.\d+\.\d+)?$/, use: [ { loader: 'file-loader', @@ -43,15 +46,28 @@ module.exports = { } } ] + }, + { + test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, + use: [{ + loader: 'file-loader', + options: { + name: '[name].[ext]', + outputPath: 'fonts/', // where the fonts will go + publicPath: 'resources/dist/fonts' // override the default path + } + }] } ], }, plugins: [ new CleanWebpackPlugin(), new webpack.ProvidePlugin({ - jQuery: 'jquery', $: 'jquery', popper: 'popper.js' }), ], + optimization: { + mergeDuplicateChunks: true + }, }; \ No newline at end of file