8000 Merge branch '4.1' into 4.2 · symfony/symfony-docs@0eb8c0f · 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 0eb8c0f

Browse files
javiereguiluzjaviereguiluz
committed
Merge branch '4.1' into 4.2
* 4.1: Merge all Encore installation articles into a single one Added the missing provided functions
2 parents 296e4b9 + 3d80932 commit 0eb8c0f

File tree

4 files changed

+124
-122
lines changed

4 files changed

+124
-122
lines changed

‎_build/redirection_map

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -400,3 +400,4 @@
400400
/security/password_encoding /security
401401
/weblink /web_link
402402
/components/weblink /components/web_link
403+
/frontend/encore/installation-no-flex /frontend/encore/installation

‎components/polyfill_php73.rst

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,6 @@ Provided Functions
3030
~~~~~~~~~~~~~~~~~~
3131

3232
* :phpfunction:`is_countable`
33+
* :phpfunction:`hrtime`
34+
* :phpfunction:`array_key_first`
35+
* :phpfunction:`array_key_last`

‎frontend/encore/installation-no-flex.rst

Lines changed: 0 additions & 113 deletions
This file was deleted.

‎frontend/encore/installation.rst

Lines changed: 120 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,133 @@
1-
Installing Encore (with Symfony Flex)
2-
=====================================
1+
Installing Encore
2+
=================
33

4-
.. tip::
4+
First, make sure you `install Node.js`_ and also the `Yarn package manager`_.
5+
The following instructions depend on whether you are installing Encore in a
6+
Symfony application or not.
57

6-
If your project does **not** use Symfony Flex, read :doc:`/frontend/encore/installation-no-flex`.
8+
Installing Encore in Symfony Applications
9+
-----------------------------------------
710

8-
First, make sure you `install Node.js`_ and also the `Yarn package manager`_. Then
9-
run:
11+
If your application is using :doc:`Symfony Flex </setup/flex>`, run the
12+
following commands:
1013

1114
.. code-block:: terminal
1215
1316
$ composer require encore
1417
$ yarn install
1518
16-
This will create a ``webpack.config.js`` file, add the ``assets/`` directory, and
17-
add ``node_modules/`` to ``.gitignore``.
19+
This will install and enable the `WebpackEncoreBundle`_, add the ``assets/``
20+
directory, create a ``webpack.config.js`` file, and add ``node_modules/`` to
21+
``.gitignore``. If you are not using Symfony Flex, you'll need to create all
22+
this by yourself following the instructions shown in the next section.
23+
24+
Nice work! You can skip the rest of this article and go write your first
25+
JavaScript and CSS by reading :doc:`/frontend/encore/simple-example`!
26+
27+
Installing Encore in non Symfony Applications
28+
---------------------------------------------
29+
30+
Install Encore into your project via Yarn:
31+
32+
.. code-block:: terminal
33+
34+
$ yarn add @symfony/webpack-encore --dev
35+
36+
# if you prefer npm, run this command instead:
37+
# npm install @symfony/webpack-encore --save-dev
38+
39+
This command creates (or modifies) a ``package.json`` file and downloads
40+
dependencies into a ``node_modules/`` directory. Yarn also creates/updates a
41+
``yarn.lock`` (called ``package-lock.json`` if you use npm).
42+
43+
.. tip::
44+
45+
You *should* commit ``package.json`` and ``yarn.lock`` (or ``package-lock.json``
46+
if using npm) to version control, but ignore ``node_modules/``.
47+
48+
Creating the webpack.config.js File
49+
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
50+
51+
Next, create a new ``webpack.config.js`` file at the root of your project. This
52+
is the main config file for both Webpack and Webpack Encore:
53+
54+
.. code-block:: js
55+
56+
var Encore = require('@symfony/webpack-encore');
57+
58+
Encore
59+
// directory where compiled assets will be stored
60+
.setOutputPath('web/build/')
61+
// public path used by the web server to access the output path
62+
.setPublicPath('/build')
63+
// only needed for CDN's or sub-directory deploy
64+
//.setManifestKeyPrefix('build/')
65+
66+
/*
67+
* ENTRY CONFIG
68+
*
69+
* Add 1 entry for each "page" of your app
70+
* (including one that's included on every page - e.g. "app")
71+
*
72+
* Each entry will result in one JavaScript file (e.g. app.js)
73+
* and one CSS file (e.g. app.css) if you JavaScript imports CSS.
74+
*/
75+
.addEntry('app', './assets/js/app.js')
76+
//.addEntry('page1', './assets/js/page1.js')
77+
//.addEntry('page2', './assets/js/page2.js')
78+
79+
// will require an extra script tag for runtime.js
80+
// but, you probably want this, unless you're building a single-page app
81+
.enableSingleRuntimeChunk()
82+
83+
.cleanupOutputBeforeBuild()
84+
.enableSourceMaps(!Encore.isProduction())
85+
// enables hashed filenames (e.g. app.abc123.css)
86+
.enableVersioning(Encore.isProduction())
87+
88+
// uncomment if you use TypeScript
89+
//.enableTypeScriptLoader()
90+
91+
// uncomment if you use Sass/SCSS files
92+
//.enableSassLoader()
93+
94+
// uncomment if you're having problems with a jQuery plugin
95+
//.autoProvidejQuery()
96+
;
97+
98+
module.exports = Encore.getWebpackConfig();
99+
100+
Next, create a new ``assets/js/app.js`` file with some basic JavaScript *and*
101+
import some JavaScript:
102+
103+
.. code-block:: javascript
104+
105+
// assets/js/app.js
106+
107+
require('../css/app.css');
108+
109+
console.log('Hello Webpack Encore');
110+
111+
And the new ``assets/css/app.css`` file:
112+
113+
.. code-block:: css
114+
115+
/* assets/css/app.css */
116+
body {
117+
background-color: lightgray;
118+
}
119+
120+
You'll customize and learn more about these file in :doc:`/frontend/encore/simple-example`.
121+
122+
.. caution::
18123

19-
Nice work! Write your first JavaScript and CSS by reading :doc:`/frontend/encore/simple-example`!
124+
Some of the documentation will use features that are specific to Symfony or
125+
Symfony's `WebpackEncoreBundle`_. These are optional, and are special ways
126+
of pointing to the asset paths generated by Encore that enable features like
127+
:doc:`versioning </frontend/encore/versioning>` and
128+
:doc:`split chunks </frontend/encore/split-chunks>`.
20129

21130
.. _`install Node.js`: https://nodejs.org/en/download/
22131
.. _`Yarn package manager`: https://yarnpkg.com/lang/en/docs/install/
132+
.. _`npm`: https://www.npmjs.com/
133+
.. _`WebpackEncoreBundle`: https://github.com/symfony/webpack-encore-bundle

0 commit comments

Comments
 (0)
0