Movatterモバイル変換

[0]ホーム
URL:

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

 Sign up
Appearance settings

Commit1593509

Browse files
committed
feature#8204 Reworded some explanations in the basic Webpack Encore example (javiereguiluz)
This PR was squashed before being merged into the 3.3 branch (closes#8204).Discussion----------Reworded some explanations in the basic Webpack Encore exampleThere are two main ways of using Webpack:* Old apps: generate 1 app.css and 1 app.js file for the entire website* New apps: generate 1 CSS and 1 JS for each "entry" (each important section)I feel that the existing article tries to mix both. That's why we use "global.scss" as the name of the CSS file instead of "app.scss" to avoid name collisions with the "app.css" generated by "app.js" entry.I propose to use first the old way and then explain better the modern way.Commits-------478b93d More rewords and removed the addStyleEntry() methodf855793 Typo381570d Reworded some explanations in the basic Webpack Encore example
2 parents3a9b398 +478b93d commit1593509

File tree

1 file changed

+32
-34
lines changed

1 file changed

+32
-34
lines changed

‎frontend/encore/simple-example.rst‎

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,20 @@ First Example
44
Imagine you have a simple project with one CSS and one JS file, organized into
55
an ``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+
Let's consider that the project follows the recommended practice of importing
11+
the CSS files for their associated JavaScript files:
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``
1121
through Sass and a *lot* more.
1222

1323
Configuring Encore/Webpack
@@ -22,20 +32,17 @@ 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 projectdirectory where all compiled assets will be stored
2636
.setOutputPath('web/build/')
2737
28-
//what'sthe public pathto this directory (relativetoyour project's document root dir)
38+
// the public pathused by the web servertoaccess the previous directory
2939
.setPublicPath('/build')
3040
3141
// empty the outputPath dir before each build
3242
.cleanupOutputBeforeBuild()
3343
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')
44+
// will create web/build/app.js and web/build/app.css
45+
.addEntry('app','./assets/js/app.js')
3946
4047
// allow sass/scss files to be processed
4148
.enableSassLoader()
@@ -83,7 +90,7 @@ Actually, to use ``enableSassLoader()``, you'll need to install a few
8390
more packages. But Encore will tell you *exactly* what you need.
8491

8592
After 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``).
93+
to the new, compiled assets (e.g. ``/build/app.css`` and ``/build/app.js``).
8794
In Symfony, use the ``asset()`` helper:
8895

8996
..code-block::twig
@@ -93,7 +100,7 @@ In Symfony, use the ``asset()`` helper:
93100
<html>
94101
<head>
95102
<!-- ... -->
96-
<link rel="stylesheet" href="{{ asset('build/global.css') }}">
103+
<link rel="stylesheet" href="{{ asset('build/app.css') }}">
97104
</head>
98105
<body>
99106
<!-- ... -->
@@ -124,7 +131,7 @@ Great! Use ``require()`` to import ``jquery`` and ``greet.js``:
124131

125132
..code-block::javascript
126133
127-
// assets/js/main.js
134+
// assets/js/app.js
128135
129136
// loads the jquery package from node_modules
130137
var $=require('jquery');
@@ -141,32 +148,23 @@ That's it! When you build your assets, jQuery and ``greet.js`` will automaticall
141148
be added to the output file (``app.js``). For common libraries like jQuery, you
142149
may want also to:doc:`create a shared entry</frontend/encore/shared-entry>` for better performance.
143150

144-
Requiring CSS Files fromJavaScript
145-
-----------------------------------
151+
MultipleJavaScript Entries
152+
---------------------------
146153

147-
Above, you created an entry called ``app`` that pointed to ``main.js``:
154+
The previous example is the best way to deal with SPA (Single Page Applications)
155+
and very simple applications. However, as your application grows, you'll need to
156+
define more entries with the JavaScript and CSS code of some specific sections
157+
(homepage, blog, store, etc.)
148158

149159
..code-block::javascript
150160
151161
Encore
152162
// ...
153-
.addEntry('app','./assets/js/main.js')
163+
.addEntry('homepage','./assets/js/homepage.js')
164+
.addEntry('blog','./assets/js/blog.js')
165+
.addEntry('store','./assets/js/store.js')
154166
;
155167
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:
168-
169-
..code-block::diff
170-
171-
<link rel="stylesheet" href="{{ asset('build/global.css') }}">
172-
+ <link rel="stylesheet" href="{{ asset('build/app.css') }}">
168+
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
170+
(e.g. ``build/homepage.js`` and ``build/homepage.css``).

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp