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

Commit381570d

Browse files
committed
Reworded some explanations in the basic Webpack Encore example
1 parentb29f615 commit381570d

File tree

1 file changed

+43
-21
lines changed

1 file changed

+43
-21
lines changed

‎frontend/encore/simple-example.rst‎

Lines changed: 43 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ 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+
With Encore, we can easily minify these files, pre-process ``app.scss``
1111
through Sass and a *lot* more.
1212

1313
Configuring Encore/Webpack
@@ -22,20 +22,20 @@ Inside, use Encore to help generate your Webpack configuration.
2222
var Encore=require('@symfony/webpack-encore');
2323
2424
Encore
25-
// directory where all compiled assets will be stored
25+
//the projectdirectory where all compiled assets will be stored
2626
.setOutputPath('web/build/')
2727
28-
//what'sthe public pathto this directory (relativetoyour project's document root dir)
28+
// the public pathused by the web servertoaccess the previous directory
2929
.setPublicPath('/build')
3030
3131
// empty the outputPath dir before each build
3232
.cleanupOutputBeforeBuild()
3333
34-
// will output as web/build/app.js
35-
.addEntry('app','./assets/js/main.js')
34+
// will output as web/build/js/app.js
35+
.addEntry('js/app','./assets/js/app.js')
3636
37-
// will output as web/build/global.css
38-
.addStyleEntry('global','./assets/css/global.scss')
37+
// will output as web/build/css/app.css
38+
.addStyleEntry('css/app','./assets/css/app.scss')
3939
4040
// allow sass/scss files to be processed
4141
.enableSassLoader()
@@ -78,7 +78,7 @@ Actually, to use ``enableSassLoader()``, you'll need to install a few
7878
more packages. But Encore will tell you *exactly* what you need.
7979

8080
After running one of these commands, you can now add ``script`` and ``link`` tags
81-
to the new, compiled assets (e.g. ``/build/global.css`` and ``/build/app.js``).
81+
to the new, compiled assets (e.g. ``/build/css/app.css`` and ``/build/js/app.js``).
8282
In Symfony, use the ``asset()`` helper:
8383

8484
..code-block::twig
@@ -88,11 +88,11 @@ In Symfony, use the ``asset()`` helper:
8888
<html>
8989
<head>
9090
<!-- ... -->
91-
<link rel="stylesheet" href="{{ asset('build/global.css') }}">
91+
<link rel="stylesheet" href="{{ asset('build/css/app.css') }}">
9292
</head>
9393
<body>
9494
<!-- ... -->
95-
<script src="{{ asset('build/app.js') }}"></script>
95+
<script src="{{ asset('build/js/app.js') }}"></script>
9696
</body>
9797
</html>
9898
@@ -139,29 +139,51 @@ may want also to :doc:`create a shared entry </frontend/encore/shared-entry>` fo
139139
Requiring CSS Files from JavaScript
140140
-----------------------------------
141141

142-
Above, you created an entry called ``app`` that pointed to ``main.js``:
142+
Above, you created an entry called ``js/app`` that pointed to ``app.js``:
143143

144144
..code-block::javascript
145145
146146
Encore
147147
// ...
148-
.addEntry('app','./assets/js/main.js')
148+
.addEntry('js/app','./assets/js/app.js')
149149
;
150150
151-
Once inside ``main.js``, you can even require CSS files:
151+
Once inside ``app.js``, you can even require CSS files:
152152

153153
..code-block::javascript
154154
155-
// assets/js/main.js
155+
// assets/js/app.js
156156
// ...
157157
158158
// a CSS file with the same name as the entry js will be output
159-
require('../css/main.scss');
159+
require('../css/app.scss');
160160
161-
Now, both an ``app.js`` **and** an ``app.css`` file will be created. You'll need
162-
to add a link tag to the ``app.css`` file in your templates:
161+
Now, both an ``app.js`` **and** an ``app.css`` file will be created in the
162+
``build/js/`` dir. You'll need to add a link tag to the ``app.css`` file in your
163+
templates:
163164

164165
..code-block::diff
165166
166-
<link rel="stylesheet" href="{{ asset('build/global.css') }}">
167-
+ <link rel="stylesheet" href="{{ asset('build/app.css') }}">
167+
<link rel="stylesheet" href="{{ asset('build/css/app.css') }}">
168+
+ <link rel="stylesheet" href="{{ asset('build/js/app.css') }}">
169+
170+
This article follows the traditional setup where you have just one main CSS file
171+
and one main JavaScript file. In lots of modern JavaScript applications, it's
172+
common to have one "entry" for each important section (homepage, blog, store, etc.)
173+
174+
In those application, it's better to just add JavaScript entries in the Webpack
175+
configuration file and import the CSS files from the JavaScript entries, as
176+
shown above:
177+
178+
..code-block::javascript
179+
180+
Encore
181+
// ...
182+
.addEntry('homepage','./assets/js/homepage.js')
183+
.addEntry('blog','./assets/js/blog.js')
184+
.addEntry('store','./assets/js/store.js')
185+
;
186+
187+
If those entries include CSS/Sass files (e.g. ``homepage.js`` requires
188+
``assets/css/homepage.scss``), two files will be generated for each of them
189+
(e.g. ``build/homepage.js`` and ``build/homepage.css``).

0 commit comments

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