Add docs for custom loaders

symfony · weaverryan · Jun 26, 2017 · Jun 24, 2017 · Jun 24, 2017 · Jun 25, 2017
commit 3d9905e093925ba681810a5891c5f5c25f35db2d
diff --git a/frontend.rst b/frontend.rst
@@ -58,6 +58,7 @@ Guides
 * :doc:`jQuery and Legacy Applications </frontend/encore/legacy-apps>`
 * :doc:`Passing Information from Twig to JavaScript </frontend/encore/server-data>`
 * :doc:`webpack-dev-server and Hot Module Replacement (HMR) </frontend/encore/dev-server>`
+* :doc:`Adding custom loaders </frontend/encore/custom-loaders>`
 
 Full API
 ........

diff --git a/frontend/encore/custom-loaders.rst b/frontend/encore/custom-loaders.rst
@@ -0,0 +1,39 @@
+Adding Custom Loaders
+=====================
+
+Encore already comes with a variety of different loaders that you can use out of the box,
+but if there is a specific loader that you want to use that is not currently supported, then you
+can easily add your own loader through the ``addLoader`` function.
+The ``addLoader`` takes any valid webpack rules config.
+
+If, for example, you want to add the `handlebars-loader`_, you can just ``addLoader`` with
+your loader config
+
+.. code-block:: javascript
+
+    Encore
+        // ...
+        .addLoader({ test: /\.handlebars$/, loader: 'handlebars-loader' })
+
+Since the loader config accepts any valid Webpack rules object, you can pass any
+additional information your need for the loader
+
+.. code-block:: twig
+
+    Encore
+        // ...
+        .addLoader(
+            {
+                test: /\.handlebars$/,
+			    loader: 'handlebars-loader',
+			    query: {
+				    helperDirs: [
+					    __dirname + '/helpers1',
+					    __dirname + '/helpers2',
+                    ],
+                    partialDirs: [
+                        path.join(__dirname, 'templates', 'partials')
+                    ]
+			    }
+            }
+        )