Repository navigation
Build Single File for Distribution #1452
Description
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.
Activity
gaearon commentedon Jan 26, 2017
Isn't
npm run buildproviding you with a single file?bryandbor commentedon Jan 27, 2017
I was under the impression that
npm run buildwould 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 commentedon Jan 27, 2017
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 commentedon Jun 8, 2017
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.cssfile (make sure you import index.css before App like here: #2470)