Skip to content

Commit 324f890

Browse files
committed
[Webpack Encore] Document addAliases() and addExternals() methods
1 parent 97fe1e9 commit 324f890

File tree

1 file changed

+42
-0
lines changed

1 file changed

+42
-0
lines changed

frontend/encore/advanced-config.rst

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -236,7 +236,49 @@ The following loaders are configurable with ``configureLoaderRule()``:
236236
- ``typescript`` (alias ``ts``)
237237
- ``handlebars``
238238

239+
Configuring Aliases When Importing or Requiring Modules
240+
-------------------------------------------------------
241+
242+
The `Webpack resolve.alias option`_ allows to create aliases to ``import`` or
243+
``require`` certain modules more easily (e.g. by aliasing commonly used ``src/``
244+
folders). In Webpack Encore you can use this option via the ``addAliases()`` method:
245+
246+
.. code-block:: javascript
247+
248+
Encore.addAliases({
249+
Utilities: path.resolve(__dirname, 'src/utilities/'),
250+
Templates: path.resolve(__dirname, 'src/templates/')
251+
})
252+
253+
With the above config, you could now import certain modules more concisely:
254+
255+
.. code-block:: diff
256+
257+
-import Utility from '../../utilities/utility';
258+
+import Utility from 'Utilities/utility';
259+
260+
Excluding Some Dependencies from Output Bundles
261+
-----------------------------------------------
262+
263+
The `Webpack externals option`_ allows to prevent bundling of certain imported
264+
packages and instead retrieve those external dependencies at runtime. This feature
265+
is mostly useful to JavaScript library developers, so you'll probably won't need it.
266+
267+
In Webpack Encore you can use this option via the ``addExternals()`` method:
268+
269+
.. code-block:: javascript
270+
271+
// this won't include jQuery and React in the output bundles generated
272+
// by Webpack Encore. You'll need to load those dependencies yourself
273+
// (e.g with a `<script>` tag) to make the application or website work.
274+
Encore.addExternals({
275+
jquery: 'jQuery',
276+
react: 'react'
277+
})
278+
239279
.. _`configuration options`: https://webpack.js.org/configuration/
240280
.. _`array of configurations`: https://webpack.js.org/configuration/configuration-types/#exporting-multiple-configurations
241281
.. _`Karma`: https://karma-runner.github.io
242282
.. _`Watching Options`: https://webpack.js.org/configuration/watch/#watchoptions
283+
.. _`Webpack resolve.alias option`: https://webpack.js.org/configuration/resolve/#resolvealias
284+
.. _`Webpack externals option`: https://webpack.js.org/configuration/externals/

0 commit comments

Comments
 (0)