Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

[Frontend] Add docs for custom loaders #8083

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions 1 frontend.rst
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,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
........
Expand Down
41 changes: 41 additions & 0 deletions 41 frontend/encore/custom-loaders.rst
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
Adding Custom Loaders
=====================

Encore already comes with a variety of different loaders that you can use out of the box,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

... out of the box. But if...

but if there is a specific loader that you want to use that is not currently supported, then you
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

supported, you can add your own loader...

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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

, call 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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should be javascript


Encore
// ...
.addLoader(
{
test: /\.handlebars$/,
loader: 'handlebars-loader',
query: {
helperDirs: [
__dirname + '/helpers1',
__dirname + '/helpers2',
],
partialDirs: [
path.join(__dirname, 'templates', 'partials')
]
}
}
)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The CS on this isn't quite right yet...


.. _`handlebars-loader`: https://github.com/pcardune/handlebars-loader
Morty Proxy This is a proxified and sanitized view of the page, visit original site.