8000 Merge branch '4.2' · symfony/symfony-docs@02465f8 · GitHub
[go: up one dir, main page]
Skip to content

Commit 02465f8

Browse files
javiereguiluzjaviereguiluz
committed
Merge branch '4.2'
* 4.2: Merge all Encore installation articles into a single one Added the missing provided functions
2 parents 7fbb983 + 0eb8c0f commit 02465f8

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