-
-
Notifications
You must be signed in to change notification settings - Fork 26.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Clarify when to use the public folder
- Loading branch information
Showing
1 changed file
with
24 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -22,6 +22,9 @@ You can find the most recent version of this guide [here](https://github.com/fac | |
- [Post-Processing CSS](#post-processing-css) | ||
- [Adding Images and Fonts](#adding-images-and-fonts) | ||
- [Using the `public` Folder](#using-the-public-folder) | ||
- [Changing the HTML](#changing-the-html) | ||
- [Adding Assets Outside of the Module System](#adding-assets-outside-of-the-module-system) | ||
- [When to Use the `public` Folder](#when-to-use-the-public-folder) | ||
- [Using Global Variables](#using-global-variables) | ||
- [Adding Bootstrap](#adding-bootstrap) | ||
- [Adding Flow](#adding-flow) | ||
|
@@ -372,7 +375,18 @@ An alternative way of handling static assets is described in the next section. | |
|
||
>Note: this feature is available with `[email protected]` and higher. | ||
Normally we encourage you to `import` assets in JavaScript files as described above. This mechanism provides a number of benefits: | ||
### Changing the HTML | ||
|
||
The `public` folder contains the HTML file so you can tweak it, for example, to [set the page title](#changing-the-page-title). | ||
The `<script>` tag with the compiled code will be added to it automatically during the build process. | ||
|
||
### Adding Assets Outside of the Module System | ||
|
||
You can also add other assets to the `public` folder. | ||
|
||
Note that we normally we encourage you to `import` assets in JavaScript files instead. | ||
For example, see the sections on [adding a stylesheet](#adding-a-stylesheet) and [adding images and fonts](#adding-images-and-fonts). | ||
This mechanism provides a number of benefits: | ||
|
||
* Scripts and stylesheets get minified and bundled together to avoid extra network requests. | ||
* Missing files cause compilation errors instead of 404 errors for your users. | ||
|
@@ -409,7 +423,15 @@ Keep in mind the downsides of this approach: | |
* Missing files will not be called at compilation time, and will cause 404 errors for your users. | ||
* Result filenames won’t include content hashes so you’ll need to add query arguments or rename them every time they change. | ||
|
||
However, it can be handy for referencing assets like [`manifest.webmanifest`](https://developer.mozilla.org/en-US/docs/Web/Manifest) from HTML, or including small scripts like [`pace.js`](http://github.hubspot.com/pace/docs/welcome/) outside of the bundled code. | ||
### When to Use the `public` Folder | ||
|
||
Normally we recommend importing [stylesheets](#adding-a-stylesheet), [images, and fonts](#adding-images-and-fonts) from JavaScript. | ||
The `public` folder is useful as a workaround for a number of less common cases: | ||
|
||
* You need a file with a specific name in the build output, such as [`manifest.webmanifest`](https://developer.mozilla.org/en-US/docs/Web/Manifest). | ||
* You have thousands of images and need to dynamically reference their paths. | ||
* You want to include a small script like [`pace.js`](http://github.hubspot.com/pace/docs/welcome/) outside of the bundled code. | ||
* Some library may be incompatible with Webpack and you have no other option but to include it as a `<script>` tag. | ||
|
||
Note that if you add a `<script>` that declares global variables, you also need to read the next section on using them. | ||
|
||
|