You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: template/README.md
+6-5Lines changed: 6 additions & 5 deletions
Original file line number
Diff line number
Diff line change
@@ -163,7 +163,7 @@ There is currently no support for preprocessors such as Less, or for sharing var
163
163
With Webpack, using static assets like images and fonts works similarly to CSS.
164
164
165
165
You can `import` an image right in a JavaScript. This tells Webpack to include that image in the bundle.
166
-
The *result* of the import will be the final image filename in the compiled bundle.
166
+
The *result* of the import is the image filename from the build output folder.
167
167
168
168
Here is an example:
169
169
@@ -181,20 +181,21 @@ function Header() {
181
181
exportdefaultfunction Header;
182
182
```
183
183
184
-
You can also use images in CSS with relative module paths:
184
+
This works in CSS too:
185
185
186
186
```css
187
187
.Logo {
188
188
background-image: url(./logo.png);
189
189
}
190
190
```
191
191
192
-
Webpack will thefind relative module references in CSS (they start with `./`) and replace them with the final paths in the compiled bundle. If you make a typo or accidentally delete an important file, you will see a compilation error, just like when you import a non-existent JavaScript module.
192
+
Webpack finds all relative module references in CSS (they start with `./`) and replaces them with the final paths from the compiled bundle.
193
193
194
-
The filenames are generated by Webpack from content hashes. If the file content changes in the future, Webpack will give it a different name in production so you don’t need to worry about long-term caching of assets.
194
+
If you make a typo or accidentally delete an important file, you will see a compilation error, just like when you import a non-existent JavaScript module. The filenames are generated by Webpack from content hashes. If the file content changes in the future, Webpack will give it a different name in production so you don’t need to worry about long-term caching of assets.
195
195
196
196
Please be advised that this is also a custom feature of Webpack.
197
-
**It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images).
197
+
**It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images).
198
+
However it may not be portable to some other environments (for example, Node.js and Browserify).
198
199
199
200
If you’d prefer to add and reference static assets in a more traditional way outside the module system, please let us know [in this issue](https://github.com/facebookincubator/create-react-app/issues/28), and we will add support for this.
0 commit comments