mirror of
https://github.com/zhigang1992/create-react-app.git
synced 2026-06-18 20:16:44 +08:00
Update README.md
This commit is contained in:
@@ -163,7 +163,7 @@ There is currently no support for preprocessors such as Less, or for sharing var
|
||||
With Webpack, using static assets like images and fonts works similarly to CSS.
|
||||
|
||||
You can `import` an image right in a JavaScript. This tells Webpack to include that image in the bundle.
|
||||
The *result* of the import will be the final image filename in the compiled bundle.
|
||||
The *result* of the import is the image filename from the build output folder.
|
||||
|
||||
Here is an example:
|
||||
|
||||
@@ -181,7 +181,7 @@ function Header() {
|
||||
export default function Header;
|
||||
```
|
||||
|
||||
You can also use images in CSS with relative module paths:
|
||||
This works in CSS too:
|
||||
|
||||
```css
|
||||
.Logo {
|
||||
@@ -189,12 +189,13 @@ You can also use images in CSS with relative module paths:
|
||||
}
|
||||
```
|
||||
|
||||
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.
|
||||
Webpack finds all relative module references in CSS (they start with `./`) and replaces them with the final paths from the compiled bundle.
|
||||
|
||||
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.
|
||||
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.
|
||||
|
||||
Please be advised that this is also a custom feature of Webpack.
|
||||
**It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images).
|
||||
**It is not required for React** but many people enjoy it (and React Native uses a similar mechanism for images).
|
||||
However it may not be portable to some other environments (for example, Node.js and Browserify).
|
||||
|
||||
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.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user