From 58b54633ae0a45fa2794295e54379d4e892abced Mon Sep 17 00:00:00 2001 From: Oliver Strobel Date: Thu, 25 Jun 2020 19:32:56 +0200 Subject: [PATCH 1/2] Enable webpack watch without dev server --- packages/cli/lib/commands/watch.js | 4 +++ packages/cli/lib/index.js | 11 ++++++ packages/cli/lib/lib/webpack/run-webpack.js | 34 +++++++++++++++++++ .../lib/lib/webpack/webpack-client-config.js | 4 +-- 4 files changed, 51 insertions(+), 2 deletions(-) diff --git a/packages/cli/lib/commands/watch.js b/packages/cli/lib/commands/watch.js index d9cf4a5f6..73a01cc06 100644 --- a/packages/cli/lib/commands/watch.js +++ b/packages/cli/lib/commands/watch.js @@ -1,11 +1,15 @@ const runWebpack = require('../lib/webpack/run-webpack'); const { warn } = require('../util'); +const toBool = (val) => val === void 0 || (val === 'false' ? false : val); + module.exports = async function (src, argv) { if (argv.rhl) { delete argv.rhl; argv.refresh = argv.rhl; } + + argv.prerender = toBool(argv.prerender); argv.src = src || argv.src; argv.production = false; diff --git a/packages/cli/lib/index.js b/packages/cli/lib/index.js index b8282cb9f..0883dc642 100755 --- a/packages/cli/lib/index.js +++ b/packages/cli/lib/index.js @@ -82,6 +82,17 @@ prog .describe('Start a live-reload server for development') .option('--src', 'Specify source directory', 'src') .option('--cwd', 'A directory to use instead of $PWD', '.') + .option('--devServer', 'Determine if dev server should be enabled', true) + .option( + '--dest', + 'Specify output directory if dev server is disabled', + 'build' + ) + .option( + '--ignore', + 'Path relative to src to be ignored during watch if dev server is disabled', + '' + ) .option('--esm', 'Builds ES-2015 bundles for your code.', false) .option('--clear', 'Clear the console', true) .option('--sw', 'Generate and attach a Service Worker', undefined) diff --git a/packages/cli/lib/lib/webpack/run-webpack.js b/packages/cli/lib/lib/webpack/run-webpack.js index a3acec26e..f1cde2086 100644 --- a/packages/cli/lib/lib/webpack/run-webpack.js +++ b/packages/cli/lib/lib/webpack/run-webpack.js @@ -16,6 +16,17 @@ async function devBuild(env) { await transformConfig(env, config); + const shouldRunDevServer = env.devServer; + + if (!shouldRunDevServer && env.prerender) { + let ssrConfig = serverConfig(env); + await transformConfig(env, ssrConfig, true); + let serverCompiler = webpack(ssrConfig); + await runWatch(serverCompiler, { + ignored: env.source(env.ignore), + }); + } + let userPort = parseInt(process.env.PORT || config.devServer.port, 10) || 8080; let port = await getPort({ port: userPort }); @@ -39,6 +50,8 @@ async function devBuild(env) { }); compiler.hooks.done.tap('CliDevPlugin', (stats) => { + if (!shouldRunDevServer) return; + let devServer = config.devServer; let protocol = process.env.HTTPS || devServer.https ? 'https' : 'http'; let host = process.env.HOST || devServer.host || 'localhost'; @@ -71,6 +84,13 @@ async function devBuild(env) { compiler.hooks.failed.tap('CliDevPlugin', rej); + if (!shouldRunDevServer) + return res( + runWatch(compiler, { + ignored: env.source(env.ignore), + }) + ); + let c = Object.assign({}, config.devServer, { stats: { colors: true }, hot: !env.refresh, @@ -122,6 +142,20 @@ function runCompiler(compiler) { }); } +function runWatch(compiler, options = {}) { + return new Promise((res, rej) => { + compiler.watch(options, (err, stats) => { + showStats(stats, true); + + if (err || (stats && stats.hasErrors())) { + rej(`${red('\n\nBuild failed! \n\n')} ${err || ''}`); + } + + res(stats); + }); + }); +} + function showStats(stats, isProd) { if (stats) { if (stats.hasErrors()) { diff --git a/packages/cli/lib/lib/webpack/webpack-client-config.js b/packages/cli/lib/lib/webpack/webpack-client-config.js index 939d14e59..dd3440daf 100644 --- a/packages/cli/lib/lib/webpack/webpack-client-config.js +++ b/packages/cli/lib/lib/webpack/webpack-client-config.js @@ -25,7 +25,7 @@ const cleanFilename = (name) => ); async function clientConfig(env) { - const { isProd, source, src, refresh, cwd /*, port? */ } = env; + const { isProd, source, src, refresh, cwd, devServer /*, port? */ } = env; const IS_SOURCE_PREACT_X_OR_ABOVE = isInstalledVersionPreactXOrAbove(cwd); const asyncLoader = IS_SOURCE_PREACT_X_OR_ABOVE ? require.resolve('@preact/async-loader') @@ -36,7 +36,7 @@ async function clientConfig(env) { polyfills: resolve(__dirname, './polyfills'), }; - if (!isProd) { + if (!isProd && devServer) { entry.bundle = [ entry.bundle, 'webpack-dev-server/client', From 0b1e41c1e55dab1d0bac0c1c6f36badae086a196 Mon Sep 17 00:00:00 2001 From: Oliver Strobel Date: Mon, 29 Jun 2020 16:00:13 +0200 Subject: [PATCH 2/2] Add options to README --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 05edf4d3e..2cf4b902f 100644 --- a/README.md +++ b/README.md @@ -141,7 +141,10 @@ $ preact watch --src Specify source directory (default src) --cwd A directory to use instead of $PWD (default .) - --esm Builds ES-2015 bundles for your code. (default true) + --devServer Determine if dev server should be enabled (default true) + --dest Specify output directory if dev server is disabled (default build) + --ignore Path relative to src to be ignored during watch if dev server is disabled + --esm Builds ES-2015 bundles for your code. (default true) --sw Generate and attach a Service Worker (default false) --json Generate build stats for bundle analysis --https Run server with HTTPS protocol