From 432e1c3b3cc86cc477b16fdc964a5adf13457262 Mon Sep 17 00:00:00 2001 From: Zak Burke Date: Mon, 30 Oct 2023 22:50:38 -0400 Subject: [PATCH] STRWEB-99 bundle stripes-core's service-worker.js (#125) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Include `service-worker.js`, pulled from `@folio/stripes-core/src/service-worker.js`, in the output bundle so it can be registered via `navigator.serviceWorker.register(...)`. Handle the service-worker in a completely separate bundle (multi-compile). Refs STRWEB-99, FOLIO-3627 --------- Co-authored-by: Michał Kuklis --- webpack.config.cli.dev.js | 1 + webpack.config.cli.js | 1 - webpack.config.service.worker.js | 31 +++++++++++++++++++++++++++++++ webpack/build.js | 18 +++++++++++++++--- webpack/serve.js | 26 +++++++++++++++++--------- 5 files changed, 64 insertions(+), 13 deletions(-) create mode 100644 webpack.config.service.worker.js diff --git a/webpack.config.cli.dev.js b/webpack.config.cli.dev.js index 804ea33..baed059 100644 --- a/webpack.config.cli.dev.js +++ b/webpack.config.cli.dev.js @@ -22,6 +22,7 @@ const buildConfig = (stripesConfig) => { const base = buildBaseConfig(allModulePaths); const devConfig = Object.assign({}, base, cli, { + name: 'development', devtool: 'inline-source-map', mode: 'development', cache: { diff --git a/webpack.config.cli.js b/webpack.config.cli.js index b2f6f2e..858aac9 100644 --- a/webpack.config.cli.js +++ b/webpack.config.cli.js @@ -9,6 +9,5 @@ module.exports = { filename: 'bundle.[name][contenthash].js', chunkFilename: 'chunk.[name][chunkhash].js', publicPath: '/', - clean: true }, }; diff --git a/webpack.config.service.worker.js b/webpack.config.service.worker.js new file mode 100644 index 0000000..9199e10 --- /dev/null +++ b/webpack.config.service.worker.js @@ -0,0 +1,31 @@ +const path = require('path'); + +const config = { + name: 'service-worker', + mode: 'development', + target: 'web', + entry: { + 'service-worker': { + import: '@folio/stripes-core/src/service-worker.js', + filename: 'service-worker.js', + } + }, + output: { + path: path.join(__dirname, 'dist'), + filename: 'service-worker.js', + publicPath: '/', + }, + module: { + rules: [ + { + test: /\.js$/, + loader: 'esbuild-loader', + options: { + target: 'es2015' + } + }, + ] + } +}; + +module.exports = config; diff --git a/webpack/build.js b/webpack/build.js index ac5cb8c..df74ef1 100644 --- a/webpack/build.js +++ b/webpack/build.js @@ -6,7 +6,7 @@ const applyWebpackOverrides = require('./apply-webpack-overrides'); const logger = require('./logger')(); const buildConfig = require('../webpack.config.cli.prod'); const sharedStylesConfig = require('../webpack.config.cli.shared.styles'); - +const serviceWorkerConfig = require('../webpack.config.service.worker'); const platformModulePath = path.join(path.resolve(), 'node_modules'); module.exports = function build(stripesConfig, options) { @@ -73,9 +73,21 @@ module.exports = function build(stripesConfig, options) { config = applyWebpackOverrides(options.webpackOverrides, config); logger.log('assign final webpack config', config); - const compiler = webpack(config); - compiler.run((err, stats) => { + + // repoint the service-worker's output.path value so it emits + // into options.outputPath + if (options.outputPath) { + serviceWorkerConfig.output.path = path.resolve(options.outputPath); + } + // override the default mode; given we are building, assume production + serviceWorkerConfig.mode = 'production'; + + webpack([config,serviceWorkerConfig], (err, stats) => { if (err) { + console.error(err.stack || err); + if (err.details) { + console.error(err.details); + } reject(err); } else { resolve(stats); diff --git a/webpack/serve.js b/webpack/serve.js index f3d60d6..0344cb9 100644 --- a/webpack/serve.js +++ b/webpack/serve.js @@ -9,6 +9,7 @@ const applyWebpackOverrides = require('./apply-webpack-overrides'); const logger = require('./logger')(); const buildConfig = require('../webpack.config.cli.dev'); const sharedStylesConfig = require('../webpack.config.cli.shared.styles'); +const serviceWorkerConfig = require('../webpack.config.service.worker'); const cwd = path.resolve(); const platformModulePath = path.join(cwd, 'node_modules'); @@ -39,8 +40,10 @@ module.exports = function serve(stripesConfig, options) { config = applyWebpackOverrides(options.webpackOverrides, config); logger.log('assign final webpack config', config); - const compiler = webpack(config); - compiler.hooks.done.tap('StripesCoreServe', stats => resolve(stats)); + const compiler = webpack([serviceWorkerConfig, config]); + const [swCompiler, stripesCompiler] = compiler.compilers; + + stripesCompiler.hooks.done.tap('StripesCoreServe', stats => resolve(stats)); const port = options.port || process.env.STRIPES_PORT || 3000; const host = options.host || process.env.STRIPES_HOST || 'localhost'; @@ -49,6 +52,14 @@ module.exports = function serve(stripesConfig, options) { app.use(staticFileMiddleware); + // To handle rewrites without the dot rule, we should include the static middleware twice + // https://github.com/bripkens/connect-history-api-fallback/blob/master/examples/static-files-and-index-rewrite + app.use(staticFileMiddleware); + + app.use(webpackDevMiddleware(swCompiler, { + publicPath: serviceWorkerConfig.output.publicPath, + })); + // Process index rewrite before webpack-dev-middleware // to respond with webpack's dist copy of index.html app.use(connectHistoryApiFallback({ @@ -56,16 +67,13 @@ module.exports = function serve(stripesConfig, options) { htmlAcceptHeaders: ['text/html', 'application/xhtml+xml'], })); - // To handle rewrites without the dot rule, we should include the static middleware twice - // https://github.com/bripkens/connect-history-api-fallback/blob/master/examples/static-files-and-index-rewrite - app.use(staticFileMiddleware); - - app.use(webpackDevMiddleware(compiler, { - stats: 'errors-only', + app.use(webpackDevMiddleware(stripesCompiler, { publicPath: config.output.publicPath, })); - app.use(webpackHotMiddleware(compiler)); + + + app.use(webpackHotMiddleware(stripesCompiler)); app.listen(port, host, (err) => { if (err) {