Multiple entries WIP

Just create an "pages"  folder in the root of project and put there *.js files.
You can override default src/index.js by creating pages/index.js.

Author: kohver

packages/react-scripts/config/paths.js

@@ -12,6 +12,7 @@
 var path = require('path');
 var fs = require('fs');
 var url = require('url');
+var glob = require('glob');
 
 // Make sure any symlinks in the project folder are resolved:
 // https://github.com/facebookincubator/create-react-app/issues/637
@@ -78,8 +79,12 @@ module.exports = {
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveApp('src/index.js'),
+  appEntries: glob.sync(resolveApp('pages/*.js')).reduce((entries, page) => {
+      entries[path.basename(page, '.js')] = resolveApp(page);
+      return entries;
+  }, {}),
   appPackageJson: resolveApp('package.json'),
-  appSrc: resolveApp('src'),
+  appSrc: [resolveApp('src'), resolveApp('pages')],
   yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveApp('src/setupTests.js'),
   appNodeModules: resolveApp('node_modules'),
@@ -102,8 +107,12 @@ module.exports = {
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
   appIndexJs: resolveApp('src/index.js'),
+  appEntries: glob.sync(resolveApp('pages/*.js')).reduce((entries, page) => {
+      entries[path.basename(page, '.js')] = resolveApp(page);
+      return entries;
+  }, {}),
   appPackageJson: resolveApp('package.json'),
-  appSrc: resolveApp('src'),
+  appSrc: [resolveApp('src'), resolveApp('pages')],
   yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveApp('src/setupTests.js'),
   appNodeModules: resolveApp('node_modules'),

packages/react-scripts/config/webpack.config.dev.js

@@ -43,26 +43,21 @@ module.exports = {
   // These are the "entry points" to our application.
   // This means they will be the "root" imports that are included in JS bundle.
   // The first two entry points enable "hot" CSS and auto-refreshes for JS.
-  entry: [
-    // Include an alternative client for WebpackDevServer. A client's job is to
-    // connect to WebpackDevServer by a socket and get notified about changes.
-    // When you save a file, the client will either apply hot updates (in case
-    // of CSS changes), or refresh the page (in case of JS changes). When you
-    // make a syntax error, this client will display a syntax error overlay.
-    // Note: instead of the default WebpackDevServer client, we use a custom one
-    // to bring better experience for Create React App users. You can replace
-    // the line below with these two lines if you prefer the stock client:
-    // require.resolve('webpack-dev-server/client') + '?/',
-    // require.resolve('webpack/hot/dev-server'),
-    require.resolve('react-dev-utils/webpackHotDevClient'),
-    // We ship a few polyfills by default:
-    require.resolve('./polyfills'),
-    // Finally, this is your app's code:
-    paths.appIndexJs
-    // We include the app code last so that if there is a runtime error during
-    // initialization, it doesn't blow up the WebpackDevServer client, and
-    // changing JS code would still trigger a refresh.
-  ],
+  // todo comments
+  entry: Object.assign({
+    index: [
+      require.resolve('react-dev-utils/webpackHotDevClient'),
+      require.resolve('./polyfills'),
+      paths.appIndexJs,
+    ],
+    polyfills: [require.resolve('./polyfills')],
+  }, Object.keys(paths.appEntries).reduce((entries, chunk) => {
+    entries[chunk] = [
+        require.resolve('react-dev-utils/webpackHotDevClient'),
+        paths.appEntries[chunk],
+    ];
+    return entries;
+  }, {})),
   output: {
     // Next line is not used in dev but WebpackDevServer crashes without it:
     path: paths.appBuild,
@@ -71,7 +66,7 @@ module.exports = {
     // This does not produce a real file. It's just the virtual path that is
     // served by WebpackDevServer in development. This is the JS bundle
     // containing code from all our entry points, and the Webpack runtime.
-    filename: 'static/js/bundle.js',
+    filename: 'static/js/[name].js',
     // This is the URL that app is served from. We use "/" in development.
     publicPath: publicPath
   },
@@ -208,6 +203,17 @@ module.exports = {
     new HtmlWebpackPlugin({
       inject: true,
       template: paths.appHtml,
+      chunks: ['index'],
+    }),
+    // todo comment
+    ...Object.keys(paths.appEntries).map((chunk) => {
+      return new HtmlWebpackPlugin({
+        inject: true,
+        template: paths.appHtml,
+        chunks: ['polyfills', chunk],
+        chunksSortMode: 'none', // todo fix
+        filename: chunk + '.html',
+      });
     }),
     // Makes some environment variables available to the JS code, for example:
     // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.

packages/react-scripts/config/webpack.config.prod.js

@@ -65,10 +65,13 @@ module.exports = {
   // You can exclude the *.map files from the build during deployment.
   devtool: 'source-map',
   // In production, we only want to load the polyfills and the app code.
-  entry: [
-    require.resolve('./polyfills'),
-    paths.appIndexJs
-  ],
+  entry: Object.assign({
+    index: [
+      require.resolve('./polyfills'),
+      paths.appIndexJs,
+    ],
+    polyfills: [require.resolve('./polyfills')],
+  }, paths.appEntries),
   output: {
     // The build folder.
     path: paths.appBuild,
@@ -223,6 +226,7 @@ module.exports = {
     new HtmlWebpackPlugin({
       inject: true,
       template: paths.appHtml,
+      chunks: ['index'],
       minify: {
         removeComments: true,
         collapseWhitespace: true,
@@ -236,6 +240,28 @@ module.exports = {
         minifyURLs: true
       }
     }),
+    // todo comment
+    ...Object.keys(paths.appEntries).map((chunk) => {
+      return new HtmlWebpackPlugin({
+        inject: true,
+        template: paths.appHtml,
+        chunks: ['polyfills', chunk],
+        chunksSortMode: 'none', // todo fix
+        filename: chunk + '.html',
+        minify: {
+          removeComments: true,
+          collapseWhitespace: true,
+          removeRedundantAttributes: true,
+          useShortDoctype: true,
+          removeEmptyAttributes: true,
+          removeStyleLinkTypeAttributes: true,
+          keepClosingSlash: true,
+          minifyJS: true,
+          minifyCSS: true,
+          minifyURLs: true
+        }
+      });
+    }),
     // Makes some environment variables available to the JS code, for example:
     // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
     // It is absolutely essential that NODE_ENV was set to production here.

packages/react-scripts/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spiking-react-scripts",
-  "version": "0.9.2-fork.1",
+  "version": "0.9.2-fork.2",
   "description": "Configuration and scripts for Create React App.",
   "repository": "stockspiking/create-react-app",
   "license": "BSD-3-Clause",
@@ -48,6 +48,7 @@
     "file-loader": "0.10.0",
     "filesize": "3.3.0",
     "fs-extra": "0.30.0",
+    "glob": "^7.1.1",
     "gzip-size": "3.0.0",
     "html-webpack-plugin": "2.24.0",
     "http-proxy-middleware": "0.17.3",