@@ -4,10 +4,20 @@ First Example
44Imagine you have a simple project with one CSS and one JS file, organized into
55an ``assets/ `` directory:
66
7- * ``assets/js/main .js ``
8- * ``assets/css/global .scss ``
7+ * ``assets/js/app .js ``
8+ * ``assets/css/app .scss ``
99
10- With Encore, we can easily minify these files, pre-process ``global.scss ``
10+ With Encore, you should think of CSS as a *dependency * of your JavaScript. This means,
11+ you will *require * whatever CSS you need from inside JavaScript:
12+
13+ .. code-block :: javascript
14+
15+ // assets/js/app.js
16+ require (' ../css/app.scss' );
17+
18+ // ...rest of JavaScript code here
19+
20+ With Encore, we can easily minify these files, pre-process ``app.scss ``
1121through Sass and a *lot * more.
1222
1323Configuring Encore/Webpack
@@ -22,20 +32,14 @@ Inside, use Encore to help generate your Webpack configuration.
2232 var Encore = require (' @symfony/webpack-encore' );
2333
2434 Encore
25- // directory where all compiled assets will be stored
35+ // the project directory where all compiled assets will be stored
2636 .setOutputPath (' web/build/' )
2737
28- // what's the public path to this directory (relative to your project's document root dir)
38+ // the public path used by the web server to access the previous directory
2939 .setPublicPath (' /build' )
3040
31- // empty the outputPath dir before each build
32- .cleanupOutputBeforeBuild ()
33-
34- // will output as web/build/app.js
35- .addEntry (' app' , ' ./assets/js/main.js' )
36-
37- // will output as web/build/global.css
38- .addStyleEntry (' global' , ' ./assets/css/global.scss' )
41+ // will create web/build/app.js and web/build/app.css
42+ .addEntry (' app' , ' ./assets/js/app.js' )
3943
4044 // allow sass/scss files to be processed
4145 .enableSassLoader ()
@@ -45,6 +49,12 @@ Inside, use Encore to help generate your Webpack configuration.
4549
4650 .enableSourceMaps (! Encore .isProduction ())
4751
52+ // empty the outputPath dir before each build
53+ .cleanupOutputBeforeBuild ()
54+
55+ // show OS notifications when builds finish/fail
56+ .enableBuildNotifications ()
57+
4858 // create hashed filenames (e.g. app.abc123.css)
4959 // .enableVersioning()
5060 ;
@@ -83,7 +93,7 @@ Actually, to use ``enableSassLoader()``, you'll need to install a few
8393more packages. But Encore will tell you *exactly * what you need.
8494
8595After running one of these commands, you can now add ``script `` and ``link `` tags
86- to the new, compiled assets (e.g. ``/build/global .css `` and ``/build/app.js ``).
96+ to the new, compiled assets (e.g. ``/build/app .css `` and ``/build/app.js ``).
8797In Symfony, use the ``asset() `` helper:
8898
8999.. code-block :: twig
@@ -93,7 +103,7 @@ In Symfony, use the ``asset()`` helper:
93103 <html>
94104 <head>
95105 <!-- ... -->
96- <link rel="stylesheet" href="{{ asset('build/global .css') }}">
106+ <link rel="stylesheet" href="{{ asset('build/app .css') }}">
97107 </head>
98108 <body>
99109 <!-- ... -->
@@ -124,7 +134,7 @@ Great! Use ``require()`` to import ``jquery`` and ``greet.js``:
124134
125135.. code-block :: javascript
126136
127- // assets/js/main .js
137+ // assets/js/app .js
128138
129139 // loads the jquery package from node_modules
130140 var $ = require (' jquery' );
@@ -139,34 +149,31 @@ Great! Use ``require()`` to import ``jquery`` and ``greet.js``:
139149
140150 That's it! When you build your assets, jQuery and ``greet.js `` will automatically
141151be added to the output file (``app.js ``). For common libraries like jQuery, you
142- 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.
143154
144- Requiring CSS Files from JavaScript
145- -----------------------------------
155+ Multiple JavaScript Entries
156+ ---------------------------
146157
147- Above, you created an entry called ``app `` that pointed to ``main.js ``:
158+ The previous example is the best way to deal with SPA (Single Page Applications)
159+ and very simple applications. However, as your app 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:
148162
149163.. code-block :: javascript
150164
151165 Encore
152166 // ...
153- .addEntry (' app' , ' ./assets/js/main.js' )
167+ .addEntry (' homepage' , ' ./assets/js/homepage.js' )
168+ .addEntry (' blog' , ' ./assets/js/blog.js' )
169+ .addEntry (' store' , ' ./assets/js/store.js' )
154170 ;
155171
156- Once inside ``main.js ``, you can even require CSS files:
157-
158- .. code-block :: javascript
159-
160- // assets/js/main.js
161- // ...
162-
163- // a CSS file with the same name as the entry js will be output
164- require (' ../css/main.scss' );
165-
166- Now, both an ``app.js `` **and ** an ``app.css `` file will be created. You'll need
167- to add a link tag to the ``app.css `` file in your templates:
172+ If those entries include CSS/Sass files (e.g. ``homepage.js `` requires
173+ ``assets/css/homepage.scss ``), two files will be generated for each:
174+ (e.g. ``build/homepage.js `` and ``build/homepage.css ``).
168175
169- .. code-block :: diff
176+ Keep Going!
177+ -----------
170178
171- <link rel="stylesheet" href="{{ asset('build/global.css') }}">
172- + <link rel="stylesheet" href="{{ asset('build/app.css') }}">
179+ Go back to the :ref: `Encore Top List <encore-toc >` to learn more and add new features.
0 commit comments