diff --git a/webpack.config.cli.dev.js b/webpack.config.cli.dev.js index f1a8f3e..d390941 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: { @@ -36,19 +37,12 @@ const buildConfig = (stripesConfig) => { }); // Override filename to remove the hash in development due to memory issues (STCOR-296) - devConfig.output.filename = '[name].js'; - devConfig.entry = - { - css: devConfig.entry.css, - main: [ - 'webpack-hot-middleware/client', - '@folio/stripes-ui', - ], - 'service-worker': { - import: '@folio/stripes-core/src/service-worker.js', - filename: 'service-worker.js', - } - }; + devConfig.output.filename = 'bundle.js'; + devConfig.entry = [ + 'webpack-hot-middleware/client', + ...devConfig.entry.css, + '@folio/stripes-ui', + ]; // in dev-mode when react-refresh-webpack-plugin (hot reload) is in play // and there are multiple entry points on a single page (as there are now 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/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) {