8000 Merge branch '5.1' of github.com:symfony/symfony-docs into 5.1 · symfony/symfony-docs@72915a1 · GitHub
[go: up one dir, main page]
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

Commit 72915a1

Browse files
javiereguiluzjaviereguiluz
committed
Merge branch '5.1' of github.com:symfony/symfony-docs into 5.1
* '5.1' of github.com:symfony/symfony-docs: [Webpack Encore] Change default assets directory structure
2 parents 2832b1f + 79010c7 commit 72915a1

10 files changed

+49
-49
lines changed

‎frontend/encore/advanced-config.rst

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,8 @@ state of the current configuration to build a new one:
6565
Encore
6666
.setOutputPath('public/build/first_build/')
6767
.setPublicPath('/build/first_build')
68-
.addEntry('app', './assets/js/app.js')
69-
.addStyleEntry('global', './assets/css/global.scss')
68+
.addEntry('app', './assets/app.js')
69+
.addStyleEntry('global', './assets/styles/global.scss')
7070
.enableSassLoader()
7171
.autoProvidejQuery()
7272
.enableSourceMaps(!Encore.isProduction())
@@ -85,8 +85,8 @@ state of the current configuration to build a new one:
8585
Encore
8686
.setOutputPath('public/build/second_build/')
8787
.setPublicPath('/build/second_build')
88-
.addEntry('mobile', './assets/js/mobile.js')
89-
.addStyleEntry('mobile', './assets/css/mobile.less')
88+
.addEntry('mobile', './assets/mobile.js')
89+
.addStyleEntry('mobile', './assets/styles/mobile.less')
9090
.enableLessLoader()
9191
.enableSourceMaps(!Encore.isProduction())
9292
;

‎frontend/encore/bootstrap.rst

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ a ``global.scss`` file, import it from there:
1818

1919
.. code-block:: scss
2020
21-
// assets/css/global.scss
21+
// assets/styles/global.scss
2222
2323
// customize some Bootstrap variables
2424
$primary: darken(#428bca, 20%);

‎frontend/encore/code-splitting.rst

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ clicked a link:
99

1010
.. code-block:: javascript
1111
12-
// assets/js/app.js
12+
// assets/app.js
1313
1414
import $ from 'jquery';
1515
// a fictional "large" module (e.g. it imports video.js internally)
@@ -27,13 +27,13 @@ the code via AJAX when it's needed:
2727

2828
.. code-block:: javascript
2929
30-
// assets/js/app.js
30+
// assets/app.js
3131
3232
import $ from 'jquery';
3333
3434
$('.js-open-video').on('click', function() {
3535
// you could start a loading animation here
36-
36+
3737
// use import() as a function - it returns a Promise
3838
import('./components/VideoPlayer').then(({ default: VideoPlayer }) => {
3939
// you could stop a loading animation here

‎frontend/encore/copy-files.rst

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ To reference an image tag from inside a JavaScript file, *require* the file:
1212

1313
.. code-block:: javascript
1414
15-
// assets/js/app.js
15+
// assets/app.js
1616
1717
// returns the final, public path to this file
1818
// path is relative to this file - e.g. assets/images/logo.png

‎frontend/encore/faq.rst

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ But, instead of working, you see an error:
116116

117117
This dependency was not found:
118118

119-
* respond.js in ./assets/js/app.js
119+
* respond.js in ./assets/app.js
120120

121121
Typically, a package will "advertise" its "main" file by adding a ``main`` key to
122122
its ``package.json``. But sometimes, old libraries won't have this. Instead, you'll

‎frontend/encore/installation.rst

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -79,9 +79,9 @@ is the main config file for both Webpack and Webpack Encore:
7979
* Each entry will result in one JavaScript file (e.g. app.js)
8080
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
8181
*/
82-
.addEntry('app', './assets/js/app.js')
83-
//.addEntry('page1', './assets/js/page1.js')
84-
//.addEntry('page2', './assets/js/page2.js')
82+
.addEntry('app', './assets/app.js')
83+
//.addEntry('page1', './assets/page1.js')
84+
//.addEntry('page2', './assets/page2.js')
8585
8686
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
8787
.splitEntryChunks()
@@ -124,17 +124,17 @@ is the main config file for both Webpack and Webpack Encore:
124124
125125
// uncomment if you use API Platform Admin (composer require api-admin)
126126
//.enableReactPreset()
127-
//.addEntry('admin', './assets/js/admin.js')
127+
//.addEntry('admin', './assets/admin.js')
128128
;
129129
130130
module.exports = Encore.getWebpackConfig();
131131
132-
Next, open the new ``assets/js/app.js`` file which contains some JavaScript code
132+
Next, open the new ``assets/app.js`` file which contains some JavaScript code
133133
*and* imports some CSS:
134134

135135
.. code-block:: javascript
136136
137-
// assets/js/app.js
137+
// assets/app.js
138138
/*
139139
* Welcome to your app's main JavaScript file!
140140
*
@@ -148,13 +148,13 @@ Next, open the new ``assets/js/app.js`` file which contains some JavaScript code
148148
// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
149149
// import $ from 'jquery';
150150
151-
console.log('Hello Webpack Encore! Edit me in assets/js/app.js');
151+
console.log('Hello Webpack Encore! Edit me in assets/app.js');
152152
153-
And the new ``assets/css/app.css`` file:
153+
And the new ``assets/styles/app.css`` file:
154154

155155
.. code-block:: css
156156
157-
/* assets/css/app.css */
157+
/* assets/styles/app.css */
158158
body {
159159
background-color: lightgray;
160160
}

‎frontend/encore/shared-entry.rst

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ Update your code to use ``createSharedEntry()``:
1818
1919
Encore
2020
// ...
21-
- .addEntry('app', './assets/js/app.js')
22-
+ .createSharedEntry('app', './assets/js/app.js')
23-
.addEntry('homepage', './assets/js/homepage.js')
24-
.addEntry('blog', './assets/js/blog.js')
25-
.addEntry('store', './assets/js/store.js')
21+
- .addEntry('app', './assets/app.js')
22+
+ .createSharedEntry('app', './assets/app.js')
23+
.addEntry('homepage', './assets/homepage.js')
24+
.addEntry('blog', './assets/blog.js')
25+
.addEntry('store', './assets/store.js')
2626
2727
Before making this change, if both ``app.js`` and ``store.js`` require ``jquery``,
2828
then ``jquery`` would be packaged into *both* files, which is wasteful. By making

‎frontend/encore/simple-example.rst

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ Encore: Setting up your Project
44
After :doc:`installing Encore </frontend/encore/installation>`, your app already has one
55
CSS and one JS file, organized into an ``assets/`` directory:
66

7-
* ``assets/js/app.js``
8-
* ``assets/css/app.css``
7+
* ``assets/app.js``
8+
* ``assets/styles/app.css``
99

1010
With Encore, think of your ``app.js`` file like a standalone JavaScript
1111
application: it will *require* all of the dependencies it needs (e.g. jQuery or React),
@@ -14,7 +14,7 @@ application: it will *require* all of the dependencies it needs (e.g. jQuery or
1414

1515
.. code-block:: javascript
1616
17-
// assets/js/app.js
17+
// assets/app.js
1818
// ...
1919
2020
import '../css/app.css';
@@ -43,14 +43,14 @@ of your project. It already holds the basic config you need:
4343
// public path used by the web server to access the output path
4444
.setPublicPath('/build')
4545
46-
.addEntry('app', './assets/js/app.js')
46+
.addEntry('app', './assets/app.js')
4747
4848
// ...
4949
;
5050
5151
// ...
5252
53-
The *key* part is ``addEntry()``: this tells Encore to load the ``assets/js/app.js``
53+
The *key* part is ``addEntry()``: this tells Encore to load the ``assets/app.js``
5454
file and follow *all* of the ``require()`` statements. It will then package everything
5555
together and - thanks to the first ``app`` argument - output final ``app.js`` and
5656
``app.css`` files into the ``public/build`` directory.
@@ -115,7 +115,7 @@ can do most of the work for you:
115115
.. _encore-entrypointsjson-simple-description:
116116

117117
That's it! When you refresh your page, all of the JavaScript from
118-
``assets/js/app.js`` - as well as any other JavaScript files it included - will
118+
``assets/app.js`` - as well as any other JavaScript files it included - will
119119
be executed. All the CSS files that were required will also be displayed.
120120

121121
The ``encore_entry_link_tags()`` and ``encore_entry_script_tags()`` functions
@@ -143,7 +143,7 @@ files. First, create a file that exports a function:
143143

144144
.. code-block:: javascript
145145
146-
// assets/js/greet.js
146+
// assets/greet.js
147147
module.exports = function(name) {
148148
return `Yo yo ${name} - welcome to Encore!`;
149149
};
@@ -158,7 +158,7 @@ Great! Use ``require()`` to import ``jquery`` and ``greet.js``:
158158

159159
.. code-block:: diff
160160
161-
// assets/js/app.js
161+
// assets/app.js
162162
// ...
163163
164164
+ // loads the jquery package from node_modules
@@ -187,7 +187,7 @@ To export values using the alternate syntax, use ``export``:
187187

188188
.. code-block:: diff
189189
190-
// assets/js/greet.js
190+
// assets/greet.js
191191
- module.exports = function(name) {
192192
+ export default function(name) {
193193
return `Yo yo ${name} - welcome to Encore!`;
@@ -197,7 +197,7 @@ To import values, use ``import``:
197197

198198
.. code-block:: diff
199199
200-
// assets/js/app.js
200+
// assets/app.js
201201
- require('../css/app.css');
202202
+ import '../css/app.css';
203203
@@ -219,12 +219,12 @@ etc.). To handle this, create a new "entry" JavaScript file for each page:
219219

220220
.. code-block:: javascript
221221
222-
// assets/js/checkout.js
222+
// assets/checkout.js
223223
// custom code for your checkout page
224224
225225
.. code-block:: javascript
226226
227-
// assets/js/account.js
227+
// assets/account.js
228228
// custom code for your account page
229229
230230
Next, use ``addEntry()`` to tell Webpack to read these two new files when it builds:
@@ -234,9 +234,9 @@ Next, use ``addEntry()`` to tell Webpack to read these two new files when it bui
234234
// webpack.config.js
235235
Encore
236236
// ...
237-
.addEntry('app', './assets/js/app.js')
238-
+ .addEntry('checkout', './assets/js/checkout.js')
239-
+ .addEntry('account', './assets/js/account.js')
237+
.addEntry('app', './assets/app.js')
238+
+ .addEntry('checkout', './assets/checkout.js')
239+
+ .addEntry('account', './assets/account.js')
240240
// ...
241241
242242
And because you just changed the ``webpack.config.js`` file, make sure to stop
@@ -285,7 +285,7 @@ file to ``app.scss`` and update the ``import`` statement:
285285

286286
.. code-block:: diff
287287
288-
// assets/js/app.js
288+
// assets/app.js
289289
- import '../css/app.css';
290290
+ import '../css/app.scss';
291291
@@ -336,7 +336,7 @@ If you want to only compile a CSS file, that's possible via ``addStyleEntry()``:
336336
Encore
337337
// ...
338338
339-
.addStyleEntry('some_page', './assets/css/some_page.css')
339+
.addStyleEntry('some_page', './assets/styles/some_page.css')
340340
;
341341
342342
This will output a new ``some_page.css``.

‎frontend/encore/split-chunks.rst

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@ To enable this, call ``splitEntryChunks()``:
1414
// ...
1515
1616
// multiple entry files, which probably import the same code
17-
.addEntry('app', './assets/js/app.js')
18-
.addEntry('homepage', './assets/js/homepage.js')
19-
.addEntry('blog', './assets/js/blog.js')
20-
.addEntry('store', './assets/js/store.js')
17+
.addEntry('app', './assets/app.js')
18+
.addEntry('homepage', './assets/homepage.js')
19+
.addEntry('blog', './assets/blog.js')
20+
.addEntry('store', './assets/store.js')
2121
2222
+ .splitEntryChunks()
2323

‎mailer.rst

Lines changed: 4 additions & 4 deletions
< 2851 td data-grid-cell-id="diff-fc2bff5bec98012aaf8960fa9d228261fd7b7aacdb7a2261089e9aa277f90dfe-653-653-1" data-selected="false" role="gridcell" style="background-color:var(--bgColor-default);text-align:center" tabindex="-1" valign="top" class="focusable-grid-cell diff-line-number position-relative diff-line-number-neutral left-side">653
Original file line numberDiff line numberDiff line change
@@ -626,7 +626,7 @@ called ``css`` that points to the directory where ``email.css`` lives:
626626
627627
paths:
628628
# point this wherever your css files live
629-
'%kernel.project_dir%/assets/css': css
629+
'%kernel.project_dir%/assets/styles': styles
630630
631631
.. code-block:: xml
632632
@@ -642,7 +642,7 @@ called ``css`` that points to the directory where ``email.css`` lives:
642642
<!-- ... -->
643643
644644
<!-- point this wherever your css files live -->
645-
<twig:path namespace="css">%kernel.project_dir%/assets/css</twig:path>
645+
<twig:path namespace="styles">%kernel.project_dir%/assets/styles</twig:path>
646646
</twig:config>
647647
</container>
648648
@@ -653,7 +653,7 @@ called ``css`` that points to the directory where ``email.css`` lives:
653
// ...
654654
'paths' => [
655655
// point this wherever your css files live
656-
'%kernel.project_dir%/assets/css' => 'css',
656+
'%kernel.project_dir%/assets/styles' => 'styles',
657657
],
658658
]);
659659
@@ -741,7 +741,7 @@ You can combine all filters to create complex email messages:
741741
742742
This makes use of the :ref:`css Twig namespace <mailer-css-namespace>` we created
743743
earlier. You could, for example, `download the foundation-emails.css file`_
744-
directly from GitHub and save it in ``assets/css``.
744+
directly from GitHub and save it in ``assets/styles``.
745745

746746
Signing and Encrypting Messages
747747
-------------------------------

0 commit comments

Comments
 (0)
0