fix: Promise pollyfil loaded before webpack bundle

package.json

@@ -73,7 +73,8 @@
     "babel-cli": "^6.24.0",
     "babel-eslint": "^7.2.1",
     "eslint": "^3.19.0",
-    "eslint-plugin-react": "^7.0.1"
+    "eslint-plugin-react": "^7.0.1",
+    "html-webpack-exclude-assets-plugin": "0.0.5"
   },
   "dependencies": {
     "@webpack-blocks/css-modules": "^0.4.0",

src/lib/entry.js

@@ -23,13 +23,5 @@ if (typeof app==='function') {
 
 	if (module.hot) module.hot.accept('preact-cli-entrypoint', init);
 
-	if (typeof fetch==='function') {
-		init();
-	}
-	else {
-		require.ensure(['preact-cli-polyfills'], () => {
-			require('preact-cli-polyfills');
-			init();
-		}, 'polyfills');
-	}
+	init();
 }

src/lib/webpack-config.js

@@ -19,6 +19,7 @@ import ExtractTextPlugin from 'extract-text-webpack-plugin';
 import autoprefixer from 'autoprefixer';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import ScriptExtHtmlWebpackPlugin from 'script-ext-html-webpack-plugin';
+import HtmlWebpackExcludeAssetsPlugin from 'html-webpack-exclude-assets-plugin';
 import ProgressBarPlugin from 'progress-bar-webpack-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
 import ReplacePlugin from 'webpack-plugin-replace';
@@ -58,11 +59,14 @@ export default env => {
 
 	return createConfig.vanilla([
 		setContext(src('.')),
-		entryPoint(resolve(__dirname, './entry')),
+		entryPoint({
+			'bundle': resolve(__dirname, './entry'),
+			'polyfills': resolve(__dirname, './polyfills'),
+		}),
 		setOutput({
 			path: resolve(cwd, env.dest || 'build'),
 			publicPath: '/',
-			filename: 'bundle.js',
+			filename: '[name].js',
 			chunkFilename: '[name].chunk.[chunkhash:5].js'
 		}),
 
@@ -75,7 +79,6 @@ export default env => {
 				extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.less', '.scss', '.sass', '.css'],
 				alias: {
 					'preact-cli-entrypoint': src('index.js'),
-					'preact-cli-polyfills': resolve(__dirname, 'polyfills.js'),
 					style: src('style'),
 					preact$: isProd ? 'preact/dist/preact.min.js' : 'preact',
 					// preact-compat aliases for supporting React dependencies:
@@ -433,6 +436,7 @@ const production = config => addPlugins([
 		minify: true,
 		stripPrefix: config.cwd,
 		staticFileGlobsIgnorePatterns: [
+			/polyfills\.js$/,
 			/\.map$/,
 			/push-manifest\.json$/
 		]
@@ -457,14 +461,15 @@ const htmlPlugin = config => addPlugins([
 		compile: true,
 		preload: config.preload===true,
 		title: config.title || config.manifest.name || config.manifest.short_name || (config.pkg.name || '').replace(/^@[a-z]\//, '') || 'Preact App',
+		excludeAssets: [/[polyfills|bundle]\.*\.js$/],
 		config,
 		ssr(params) {
 			return config.prerender ? prerender(config, params) : '';
 		}
 	}),
-
+	new HtmlWebpackExcludeAssetsPlugin(),
 	new ScriptExtHtmlWebpackPlugin({
 		// inline: 'bundle.js',
-		defaultAttribute: 'async'
+		defaultAttribute: 'defer'
 	})
 ]);

src/resources/template.html

@@ -11,6 +11,7 @@
 			<meta name="theme-color" content="<%= htmlWebpackPlugin.options.manifest.theme_color %>">
 		<% } %>
 		<% for (var chunk of webpack.chunks) { %>
+		 <% if (chunk.names.length === 1 && chunk.names[0] === 'polyfills') continue; %>
 			<% for (var file of chunk.files) { %>
 				<% if (htmlWebpackPlugin.options.preload && file.match(/\.(js|css)$/)) { %>
 					<link rel="preload" href="<%= htmlWebpackPlugin.files.publicPath + file %>" as="<%= file.match(/\.css$/)?'style':'script' %>">
@@ -24,5 +25,7 @@
 		<%= htmlWebpackPlugin.options.ssr({
 			url: '/'
 		}) %>
+		<script defer src="<%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
+		<script>window.fetch||document.write('<script src="<%= htmlWebpackPlugin.files.chunks["polyfills"].entry %>"><\/script>')</script>
 	</body>
 </html>