diff --git a/package.json b/package.json index 2eedc58..294ca7c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,7 @@ { "dependencies": { "copy-webpack-plugin": "^5.1.1", + "elm-hot-webpack-loader": "^1.1.6", "elm-webpack-loader": "^6.0.1", "favicons-webpack-plugin": "^1.0.2", "html-loader": "^0.5.5", @@ -12,8 +13,8 @@ "terser-webpack-plugin": "^2.3.4", "webpack": "^4.41.6", "webpack-cli": "^3.3.11", - "workbox-webpack-plugin": "^4.3.1", - "webpack-dev-server": "^3.10.3" + "webpack-dev-server": "^3.10.3", + "workbox-webpack-plugin": "^4.3.1" }, "name": "wand-front-utils", "version": "1.0.0", @@ -24,4 +25,4 @@ "author": "notgne2", "license": "AGPL-3.0", "description": "" -} \ No newline at end of file +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 917f3f1..5e1fc7e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,5 +1,6 @@ dependencies: copy-webpack-plugin: 5.1.1_webpack@4.41.6 + elm-hot-webpack-loader: 1.1.6_elm-webpack-loader@6.0.1 elm-webpack-loader: 6.0.1 favicons-webpack-plugin: 1.0.2_webpack@4.41.6 html-loader: 0.5.5 @@ -2408,6 +2409,19 @@ packages: dev: false resolution: integrity: sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw== + /elm-hot-webpack-loader/1.1.6_elm-webpack-loader@6.0.1: + dependencies: + elm-hot: 1.1.4 + elm-webpack-loader: 6.0.1 + dev: false + peerDependencies: + elm-webpack-loader: ^6.0.0 + resolution: + integrity: sha512-fY+36uG8/h/PvlO2HZSXBa6qGNkVCwn+QjoL/5WWHOocf7EfYAYFgJlWQqsgNQi/eYO4/dt/OglRuSsFfkFvtA== + /elm-hot/1.1.4: + dev: false + resolution: + integrity: sha512-qPDP/o/Fkifriaxaf3E7hHFB5L6Ijihyg8is4A6xna6/h/zebUiNssbQrxywI2oxNUkr6W/leEu/WlIC1tmVnw== /elm-webpack-loader/6.0.1: dependencies: glob: 7.1.6 @@ -8359,6 +8373,7 @@ packages: integrity: sha1-lSj0QtqxsihOWLQ3m7GU4i4MQAU= specifiers: copy-webpack-plugin: ^5.1.1 + elm-hot-webpack-loader: ^1.1.6 elm-webpack-loader: ^6.0.1 favicons-webpack-plugin: ^1.0.2 html-loader: ^0.5.5 diff --git a/webpack.config.js b/webpack.config.js index 6aa1a03..9a18b39 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -76,7 +76,53 @@ prerenderOpts = (width, height, name) => ({ } }) -module.exports = { +const productionPlugins = [ + new PrerenderSPAPlugin(prerenderOpts(1920, 1080, 'desktop')), + new PrerenderSPAPlugin(prerenderOpts(375, 667, 'phone')), + new PrerenderSPAPlugin(prerenderOpts(768, 1024, 'tablet')), + new InjectManifest({ + importWorkboxFrom: 'local', + swSrc: magicFile(` + workbox.core.skipWaiting(); + workbox.core.clientsClaim(); + workbox.precaching.cleanupOutdatedCaches() + workbox.routing.registerNavigationRoute('/index.html'); + workbox.precaching.precacheAndRoute(self.__precacheManifest); + `), + swDest: 'sw.js', + }), + new ImageminPlugin({ + jpegtran: { progressive: true }, + svgo: null, + }), +]; + +let plugins = [ + new CopyPlugin([{ from: 'data', to: 'data' }, { from: 'wand.js', to: 'wand.js' }]), + new HtmlWebpackPlugin({ + hash: true, + inject: true, + minify: htmlMin, + template: './template.html', + meta: { + viewport: 'width=360, initial-scale=1, maximum-scale=1' + } + }), + new FaviconsWebpackPlugin({ + logo: path.join(__dirname, 'data', 'images', 'icon.png'), + inject: false, // manually in our template for now cos its fuckd + mode: 'webapp', + prefix: 'appdata', + favicons: { + appName: PRETTY_NAME, + appDescription: DESCRIPTION, + background: BACKGROUND_COLOR, + theme_color: THEME_COLOR, + } + }), +]; + +module.exports = (env, argv) => ({ target: 'web', externals: { svgo: 'svgo' @@ -98,10 +144,15 @@ module.exports = { { test: /\.elm$/, exclude: [/elm-stuff/, /node_modules/], - loader: 'elm-webpack-loader', - options: { - optimize: true - } + use: [ + { loader: 'elm-hot-webpack-loader' }, + { + loader: 'elm-webpack-loader', + options: { + optimize: argv.mode == 'production' + }, + }, + ], }, { test: /\.html$/, @@ -114,106 +165,11 @@ module.exports = { ], }, optimization: { - minimize: true, + minimize: argv.mode == 'production', minimizer: [ new TerserPlugin({ terserOptions: jsMin }), new TerserPlugin({ terserOptions: jsMin }), ], }, - plugins: [ - new CopyPlugin([{ from: 'data', to: 'data' }, { from: 'wand.js', to: 'wand.js' }]), - new ImageminPlugin({ - jpegtran: { progressive: true }, - svgo: null, - // svgo: { - // full: true, - // plugins: [ - // { 'removeDoctype': { className: 'removeDoctype', attributes: [] } }, - // { 'removeXMLProcInst': { className: 'removeXMLProcInst', attributes: [] } }, - // { 'removeComments': { className: 'removeComments', attributes: [] } }, - // { 'removeMetadata': { className: 'removeMetadata', attributes: [] } }, - // { 'removeXMLNS': { className: 'removeXMLNS', attributes: [] } }, - // { 'removeEditorsNSData': { className: 'removeEditorsNSData', attributes: [] } }, - // { 'cleanupAttrs': { className: 'cleanupAttrs', attributes: [] } }, - // { 'inlineStyles': { className: 'inlineStyles', attributes: [] } }, - // { 'minifyStyles': { className: 'minifyStyles', attributes: [] } }, - // { 'convertStyleToAttrs': { className: 'convertStyleToAttrs', attributes: [] } }, - // { 'cleanupIDs': { className: 'cleanupIDs', attributes: [] } }, - // { 'prefixIds': { className: 'prefixIds', attributes: [] } }, - // { 'removeRasterImages': { className: 'removeRasterImages', attributes: [] } }, - // { 'removeUselessDefs': { className: 'removeUselessDefs', attributes: [] } }, - // { 'cleanupNumericValues': { className: 'cleanupNumericValues', attributes: [] } }, - // { 'cleanupListOfValues': { className: 'cleanupListOfValues', attributes: [] } }, - // { 'convertColors': { className: 'convertColors', attributes: [] } }, - // { 'removeUnknownsAndDefaults': { className: 'removeUnknownsAndDefaults', attributes: [] } }, - // { 'removeNonInheritableGroupAttrs': { className: 'removeNonInheritableGroupAttrs', attributes: [] } }, - // { 'removeUselessStrokeAndFill': { className: 'removeUselessStrokeAndFill', attributes: [] } }, - // { 'removeViewBox': { className: 'removeViewBox', attributes: [] } }, - // { 'cleanupEnableBackground': { className: 'cleanupEnableBackground', attributes: [] } }, - // { 'removeHiddenElems': { className: 'removeHiddenElems', attributes: [] } }, - // { 'removeEmptyText': { className: 'removeEmptyText', attributes: [] } }, - // { 'convertShapeToPath': { className: 'convertShapeToPath', attributes: [] } }, - // { 'convertEllipseToCircle': { className: 'convertEllipseToCircle', attributes: [] } }, - // { 'moveElemsAttrsToGroup': { className: 'moveElemsAttrsToGroup', attributes: [] } }, - // { 'moveGroupAttrsToElems': { className: 'moveGroupAttrsToElems', attributes: [] } }, - // { 'collapseGroups': { className: 'collapseGroups', attributes: [] } }, - // { 'convertPathData': { className: 'convertPathData', attributes: [] } }, - // { 'convertTransform': { className: 'convertTransform', attributes: [] } }, - // { 'removeEmptyAttrs': { className: 'removeEmptyAttrs', attributes: [] } }, - // { 'removeEmptyContainers': { className: 'removeEmptyContainers', attributes: [] } }, - // { 'mergePaths': { className: 'mergePaths', attributes: [] } }, - // { 'removeUnusedNS': { className: 'removeUnusedNS', attributes: [] } }, - // { 'sortAttrs': { className: 'sortAttrs', attributes: [] } }, - // { 'sortDefsChildren': { className: 'sortDefsChildren', attributes: [] } }, - // { 'removeTitle': { className: 'removeTitle', attributes: [] } }, - // { 'removeDesc': { className: 'removeDesc', attributes: [] } }, - // { 'removeDimensions': { className: 'removeDimensions', attributes: [] } }, - // { 'removeAttrs': { className: 'removeAttrs', attributes: [] } }, - // { 'removeAttributesBySelector': { className: 'removeAttributesBySelector', attributes: [] } }, - // { 'removeElementsByAttr': { className: 'removeElementsByAttr', attributes: [] } }, - // { 'addClassesToSVGElement': { className: 'addClassesToSVGElement', attributes: [] } }, - // { 'removeStyleElement': { className: 'removeStyleElement', attributes: [] } }, - // { 'removeScriptElement': { className: 'removeScriptElement', attributes: [] } }, - // { 'addAttributesToSVGElement': { className: 'addAttributesToSVGElement', attributes: [] } }, - // { 'removeOffCanvasPaths': { className: 'removeOffCanvasPaths', attributes: [] } }, - // { 'reusePaths': { className: 'reusePaths', attributes: [] } }, - // ] - // }, - }), - new HtmlWebpackPlugin({ - hash: true, - inject: true, - minify: htmlMin, - template: './template.html', - meta: { - viewport: 'width=360, initial-scale=1, maximum-scale=1' - } - }), - new FaviconsWebpackPlugin({ - logo: path.join(__dirname, 'data', 'images', 'icon.png'), - inject: false, // manually in our template for now cos its fuckd - mode: 'webapp', - prefix: 'appdata', - favicons: { - appName: PRETTY_NAME, - appDescription: DESCRIPTION, - background: BACKGROUND_COLOR, - theme_color: THEME_COLOR, - } - }), - new PrerenderSPAPlugin(prerenderOpts(1920, 1080, 'desktop')), - new PrerenderSPAPlugin(prerenderOpts(375, 667, 'phone')), - new PrerenderSPAPlugin(prerenderOpts(768, 1024, 'tablet')), - new InjectManifest({ - importWorkboxFrom: 'local', - swSrc: magicFile(` - workbox.core.skipWaiting(); - workbox.core.clientsClaim(); - workbox.precaching.cleanupOutdatedCaches() - workbox.routing.registerNavigationRoute('/index.html'); - workbox.precaching.precacheAndRoute(self.__precacheManifest); - `), - swDest: 'sw.js', - }), - ] -} \ No newline at end of file + plugins: [...plugins, ...(argv.mode == 'production' ? productionPlugins : [])], +}) \ No newline at end of file