React App Rewire Multiple Entry - Extendend Version

React App Rewire Multiple Entry Extendend is a fork of React App Rewire Multiple Entry that lets you configure multiple entries in Create React App without ejecting.

This fork allows you to omit the hash in the compiled filenames. Use the original unless you really need this functionality. This module has only been published as the PR with the changes has not been merged to React App Rewire Multiple Entry yet.

Usage

1. Add React App Rewire Multiple Entry Extendend to your Rewired React app:

   1npm install --save-dev react-app-rewired react-app-rewire-multiple-entry-extendend

   or

   1yarn add -D react-app-rewired react-app-rewire-multiple-entry-extendend

   For create-react-app 1.x or react-scripts-ts with Webpack 3

   1npm install --save-dev react-app-rewired@1.6.2

   or

   1yarn add -D react-app-rewired@1.6.2

2. Modify package.json

   1  "scripts": {
   2-   "start": "react-scripts start",
   3+   "start": "react-app-rewired start",
   4-   "build": "react-scripts build",
   5+   "build": "react-app-rewired build",
   6-   "test": "react-scripts test",
   7+   "test": "react-app-rewired test",
   8    "eject": "react-scripts eject"
   9}

3. Add React App Rewire Multiple Entry to config-overrides.js in your React app directory:

   Basic Usage

   1// config-overrides.js
   2
   3const multipleEntry = require('react-app-rewire-multiple-entry-extended')([
   4  {
   5    entry: 'src/entry/landing.js',
   6    template: 'public/landing.html',
   7    outPath: '/landing.html'
   8  }
   9]);
   10
   11module.exports = {
   12  webpack: function(config, env) {
   13    multipleEntry.addMultiEntry(config);
   14    return config;
   15  }
   16};

   Work with customize-cra

   1// config-overrides.js
   2
   3const multipleEntry = require('react-app-rewire-multiple-entry-extended')([
   4  {
   5    entry: 'src/entry/landing.js',
   6    template: 'public/landing.html',
   7    outPath: '/landing.html'
   8  }
   9]);
   10
   11const {
   12  // addBundleVisualizer,
   13  override,
   14  overrideDevServer
   15} = require('customize-cra');
   16
   17module.exports = {
   18  webpack: override(
   19    multipleEntry.addMultiEntry
   20    // addBundleVisualizer()
   21  )
   22};

Extended example

When running the React build script with the example settings above the filenames will have two hashes appended to it, one appended by the React webpack and one appended by react-app-rewire-multiple-entry. To remove all hashes from the filenames and store the hashes in a JSON-file one can use the following:

1// webpack-metadata-plugin - will write hashes to meta.json
2const fs = require("fs");
3
4class MetadataPlugin {
5  constructor(options) {
6    this.options = { filename: "meta.json", ...options };
7  }
8
9  apply(compiler) {
10    compiler.hooks.done.tap(this.constructor.name, (stats) => {
11      const metaInfo = {
12        hash: stats.hash,
13      };
14      stats.compilation.chunks.forEach((chunk) => {
15        metaInfo[chunk.name] = chunk.hash;
16      });
17      const json = JSON.stringify(metaInfo);
18      return new Promise((resolve, reject) => {
19        fs.writeFile(this.options.filename, json, "utf8", (error) => {
20          if (error) {
21            reject(error);
22            return;
23          }
24          resolve();
25        });
26      });
27    });
28  }
29}
30
31module.exports = MetadataPlugin;
32

1// config-overrides.js
2const path = require("path");
3const MetadataPlugin = require("./webpack-metadata-plugin");
4
5const multipleEntry = require("react-app-rewire-multiple-entry-extended")([
6  {
7    name: "discovery",
8    entry: path.resolve(__dirname, "./src/entries/entry-discovery.tsx"),
9    outPath: "discovery.html",
10    template: path.resolve(__dirname, "./src/entries/templates/discovery.html"),
11    omitHash: true,
12  },
13  {
14    name: "global-search",
15    entry: path.resolve(__dirname, "./src/entries/entry-global-search.tsx"),
16    outPath: "global-search.html",
17    template: path.resolve(__dirname, "./src/entries/templates/global-search.html"),
18    omitHash: true,
19  },
20  {
21    name: "tools",
22    entry: path.resolve(__dirname, "./src/entries/entry-tools.tsx"),
23    outPath: "tools.html",
24    template: path.resolve(__dirname, "./src/entries/templates/tools.html"),
25    omitHash: true,
26  },
27  {
28    name: "articles",
29    entry: path.resolve(__dirname, "./src/entries/entry-articles.tsx"),
30    outPath: "articles.html",
31    template: path.resolve(__dirname, "./src/entries/templates/articles.html"),
32    omitHash: true,
33  },
34]);
35
36module.exports = function (config, env) {
37
38  // Filenames
39  config.output.filename = "static/js/[name].js";
40  config.output.chunkFilename = "static/js/[name].js";
41
42  // Group common vendor files in separate chunk named common
43  config.optimization.splitChunks = {
44    cacheGroups: {
45      default: false,
46      commons: {
47        test: /node_modules/,
48        chunks: "initial",
49        name: "commons",
50        enforce: true,
51      },
52    },
53  };
54  config.optimization.runtimeChunk = false;
55
56  // Add entries
57  multipleEntry.addMultiEntry(config);
58
59  // Add metadata plugin to store hashes
60  if (!config.plugins) {
61    config.plugins = [];
62  }
63  config.plugins.push(new MetadataPlugin({ filename: "meta.json" }));
64
65  config.plugins.forEach((item) => {
66    // CSS filenames
67    if (item.constructor.name === "MiniCssExtractPlugin") {
68      item.options.filename = "static/css/[name].css";
69      item.options.chunkFilename = "static/css/[name].css";
70    }
71  });
72
73  return config;
74};

Results

Files generated:

1  233.96 KB  build/static/js/commons.js
2  10.93 KB   build/static/js/main.js
3  8.92 KB    build/static/js/entry-discovery.js
4  5.36 KB    build/static/js/entry-global-search.js
5  5.29 KB    build/static/js/entry-tools.js
6  5.08 KB    build/static/js/entry-articles.js
7  4.11 KB    build/static/css/commons.css
8  722 B      build/static/css/main.css
9  642 B      build/static/css/entry-discovery.css
10  642 B      build/static/css/entry-global-search.css
11  332 B      build/static/css/entry-articles.css
12  330 B      build/static/css/entry-tools.css

Content of meta.json:

1{
2    "hash":"2fda073f19bb5635aedf",
3    "commons":"b5e90583e0d99b8e7d9576dee51db10d",
4    "entry-articles":"a267eadd80c030b7861f10139cebae21",
5    "entry-discovery":"0f8b3ae0f35916868424224d023524ba",
6    "entry-global-search":"fa42f87c40e6f17b64975fd8bdf14fe0",
7    "entry-tools":"b1b720f91dd3bc8f3cd1e2e009684e28",
8    "main":"1cff87efd698e63902b75974f4695346"
9}

If one needs to have different hashes for the CSS and JS files with the same entry name, for example entry-discovery.js and entry-discovery.css, then the metadata plugin has to be changed.

API

Options

You can pass a array of entry configuration options to react-app-rewire-multiple-entry, the entry in the array has attributes below:

• entry [Required] Webpack entry JS file. Throw error when empty.
• template [Optional] HTML template used in plugin HtmlWebpackPlugin. Default value: public/index.html.
• outPath: [Optional] The file wirte the HTML to. You can specify a subdirectory. If empty, it will be calculated by path.relative(process.cwd(), template)

Method

• addMultiEntry Inject settings for multiple entry in webpack config

That’s it! Now you can control mulitple entries and omitting the hashes, enjoy coding!

---