1
- Using the URL Loader
2
- ===============================
1
+ Inlining files in CSS with Webpack URL Loader
2
+ =============================================
3
3
4
- The `URL Loader `_ allows you to convert files into Data URLs and embed them
5
- directly into the compiled version of your code. This can be useful if you
6
- want to avoid extra network requests for some of the ``url() `` calls present
7
- in your CSS files.
4
+ A simple technique to improve the performance of web applications is to reduce
5
+ the number of HTTP requests inlining small files as base64 encoded URLs in the
6
+ generated CSS files.
8
7
9
- In Encore that loader is disabled by default, but you can easily enable it for
10
- images and fonts.
11
-
12
- First, add the loader to your project:
8
+ Webpack Encore provides this feature via Webpack's `URL Loader `_ plugin, but
9
+ it's disabled by default. First, add the URL loader to your project:
13
10
14
11
.. code-block :: terminal
15
12
@@ -30,15 +27,25 @@ Then enable it in your ``webpack.config.js``:
30
27
})
31
28
;
32
29
33
- Every fonts and images files having a size below or equal to 4 KB will now be
34
- inlined directly where they are required. If their size is over 4 KB the default
35
- behavior will be used instead. You can change that threshold by modifying the
36
- ``limit `` option.
30
+ The ``limit `` option defines the maximum size in bytes of the inlined files. In
31
+ the previous example, font and image files having a size below or equal to 4 KB
32
+ will be inlined and the rest of files will be processed as usual.
33
+
34
+ You can also use all the other options supported by the `URL Loader `_. If you
35
+ want to disable this loader for either images or fonts, remove the corresponding
36
+ key from the object that is passed to the ``configureUrlLoader() `` method:
37
+
38
+ .. code-block :: javascript
37
39
38
- You can also use all of the other options supported by the `URL Loader `_.
40
+ // webpack.config.js
41
+ // ...
39
42
40
- If you wish to disable that loader for either images or fonts simply remove the
41
- corresponding key from the object that is passed to the ``configureUrlLoader() ``
42
- method.
43
+ Encore
44
+ // ...
45
+ .configureUrlLoader ({
46
+ // 'fonts' is not defined, so only images will be inlined
47
+ images: { limit: 4096 }
48
+ })
49
+ ;
43
50
44
51
.. _`URL loader` : https://github.com/webpack-contrib/url-loader
0 commit comments