Build Single File for Distribution

[bryandbor]

I'm building a small app that will need to act as a library for a client. They will need to pull a single JS and CSS file from me and then initialize my code using their own JS files. Therefore, I need to find a way to build my project into a single JS and a single CSS file. Is there a way to build with this in mind?

Example:
index.html

<script src="my_app.com/my_library_file.js></script>
<link rel="stylesheet" type="text/css" href="my_app.com/my_library_style.css"></link>

<div id="root"></div> <!-- will be used as React root when client initializes library -->

index.js

// after page loaded
my_library.init({
  //options here
});

I am not worried about giving these files pleasant names, I am only concerned with building them into single files or automating the pulling of the other files of a build from my server.

[gaearon]

Isn't npm run build providing you with a single file?

[bryandbor]

I was under the impression that npm run build would commonly split the build into multiple files in order to give your code the "Just in time" code feel (pulling in code only if/when it is necessary to enable certainly functionality)? If I'm wrong, then this is a non-issue. :)

[gaearon]

No, by default it bundles everything into a single JS file. You do have an option of code splitting (by calling require.ensure), but it's not the default.

[piotr-cz]

When there is a custom stylesheet specified in the index.html file, it's not included in the bundle built for production.

Just import it from the src/index.css file (make sure you import index.css before App like here: #2470)