You signed in with another tab or window.Reload to refresh your session.You signed out in another tab or window.Reload to refresh your session.You switched accounts on another tab or window.Reload to refresh your session.Dismiss alert
This PR was squashed before being merged into the 3.3 branch (closes#8680).Discussion----------A few tiny encore tweaks... :)Commits-------48d109f A few tiny encore tweaks
Copy file name to clipboardExpand all lines: frontend/encore/simple-example.rst
+19-10Lines changed: 19 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,8 +7,8 @@ an ``assets/`` directory:
7
7
* ``assets/js/app.js``
8
8
* ``assets/css/app.scss``
9
9
10
-
Let's consider that the project follows the recommended practiceofimporting
11
-
theCSSfiles for their associated JavaScript files:
10
+
With Encore, you should think of CSS as a *dependency*ofyour JavaScript. This means,
11
+
you will *require* whateverCSSyou need from inside #"diff-885f6ae5827b90e111ec4cc3967ac27115947b60643d0cca2ebc5c83ee575fde-12-12-0" data-selected="false" role="gridcell" tabindex="-1" valign="top">12
12
13
13
..code-block::javascript
14
14
@@ -38,9 +38,6 @@ Inside, use Encore to help generate your Webpack configuration.
38
38
// the public path used by the web server to access the previous directory
39
39
.setPublicPath('/build')
40
40
41
-
// empty the outputPath dir before each build
42
-
.cleanupOutputBeforeBuild()
43
-
44
41
// will create web/build/app.js and web/build/app.css
45
42
.addEntry('app','./assets/js/app.js')
46
43
@@ -52,6 +49,12 @@ Inside, use Encore to help generate your Webpack configuration.
52
49
53
50
.enableSourceMaps(!Encore.isProduction())
54
51
52
+
// empty the outputPath dir before each build
53
+
.cleanupOutputBeforeBuild()
54
+
55
+
// show OS notifications when builds finish/fail
56
+
.enableBuildNotifications()
57
+
55
58
// create hashed filenames (e.g. app.abc123.css)
56
59
// .enableVersioning()
57
60
;
@@ -146,15 +149,16 @@ Great! Use ``require()`` to import ``jquery`` and ``greet.js``:
146
149
147
150
That's it! When you build your assets, jQuery and ``greet.js`` will automatically
148
151
be added to the output file (``app.js``). For common libraries like jQuery, you
149
-
may want also to:doc:`create a shared entry</frontend/encore/shared-entry>` for better performance.
152
+
may want to:doc:`create a shared entry</frontend/encore/shared-entry>` for better
153
+
performance.
150
154
151
155
Multiple JavaScript Entries
152
156
---------------------------
153
157
154
158
The previous example is the best way to deal with SPA (Single Page Applications)
155
-
and very simple applications. However, as yourapplication grows, you'll need to
156
-
define more entries with the JavaScript and CSS code of some specific sections
157
-
(homepage, blog, store, etc.)
159
+
and very simple applications. However, as yourapp grows, you may want to have
160
+
page-specific JavaScript or CSS (e.g. homepage, blog, store, etc.). To handle this,
161
+
add a new "entry" for each page that needs custom JavaScript or CSS:
158
162
159
163
..code-block::javascript
160
164
@@ -166,5 +170,10 @@ define more entries with the JavaScript and CSS code of some specific sections
166
170
;
167
171
168
172
If those entries include CSS/Sass files (e.g. ``homepage.js`` requires
169
-
``assets/css/homepage.scss``), two files will be generated for each of them
173
+
``assets/css/homepage.scss``), two files will be generated for each:
170
174
(e.g. ``build/homepage.js`` and ``build/homepage.css``).
175
+
176
+
Keep Going!
177
+
-----------
178
+
179
+
Go back to the:ref:`Encore Top List<encore-toc>` to learn more and add new features.