How to build a React application into the minimum number of files to import into Dynamics 365?

Question

React

Good day!
Using create-react-app I came across a problem: by default, the project is built in the form of chunks and maps. The structure is approximately the following:
The build folder contains the static folder, which contains the js and css folder with the corresponding chunks and maps for them, as well as index.html and others like it.
However, I need to import the application into the dynamics 365 ecosystem, which does not include a map file type.
Also, no matter how I try, the app still doesn't work.
So, the next question is - is it possible to collect all this into the minimum number of files without transferring and wild dancing with a tambourine so that the application starts correctly?
The app is small and should load almost instantly.
If there is some tricky way to import files with chunks into dynamics, please tell us about it.

Answer 1

There is a solution!
Add to npm or yarn:

yarn add [email protected]
yarn add [email protected]

Go to config/webpack.config.js (you will have to do an eject first, it doesn't hurt):

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');   <--- добавить
...
plugins: [
  new HtmlWebpackPlugin(
    Object.assign(
      ...
      isEnvProduction
        ? {
            inlineSource: '.(js|css)$',    <-- добавить
            minify: {
              ...
  ),
  ...
  isEnvProduction &&
    shouldInlineRuntimeChunk &&
    new HtmlWebpackInlineSourcePlugin(HtmlWebpackPlugin),          <--- добавить
    new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
    ...

We collect, the folder with files will remain in the same form, index.html will contain everything that was in the assembly. It can even run locally, but be aware that there is a possibility of routing problems. But it is not exactly.

Answer 2

1. .map files are not needed at all for the application to work. you can't just copy them.
2. Make sure you are doing a production build https://facebook.github.io/create-react-app/docs/p...
3. You can reduce the number of files using https://github.com/timarney/react -app-rewired you can change the webpack config as you like, or just eject and change the config directly.
I don’t know anything about dynamics, but it looks like your problem is not with the number of files, but with something else.