Webpack Encore utilisation des alias

**dubitoph** · 08/10/2019, 14h49

Bonjour,

Dans des fichiers css, je cherche à utiliser un alias dans les fonctions url() pour indiquer le répertoire de certaines images qui se trouvent dans mon_projet/public/images.
Donc, dans webpack.conf.js, j'ai créé un alias @images comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
...
var path = require('path');
...
Encore
...
    .addAliases({'@images': path.resolve(__dirname, 'public/images')})
...
;
module.exports = Encore.getWebpackConfig();

Dans mon css, je cherche à accéder à une image de cette manière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
  background-image: url('~@images/sprite.svg');

Or, de cette manière, l'image n'est pas affichée. Lorsque j'inspecte le css généré, j'ai ceci :

background-image: url(/build/images/sprite.56e5c9c8.svg);

Lorsque j'ouvre le fichier sprite.56e5c9c8.svg généré dans /build/images/, j'ai ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
module.exports = __webpack_public_path__ + "_/public/images/sprite.e9a8abfa.svg";

Quelqu'un aurait une idée sur l'origine du fait que mon image ne s'affiche pas?

Merci d'avance pour votre aide.

**Henry22** · 08/10/2019, 22h18

Salut,

Il y a ce lien sur Webpack Encore qui peut peut être t'aider:

https://stackoverflow.com/questions/...e-in-symfony-4

@+

**dubitoph** · 09/10/2019, 11h41

Merci beaucoup pour ton intérêt. Cependant, je ne vois pas d'exemple d'utilisation d'alias dans le lien que tu as fourni...

**Tsilefy** · 10/10/2019, 02h54

Quand je fais exactement ce que tu décris, j'ai l'image dans mon dossier build/images.

Apparement, c'est un bug qui survient, mais uniquement quant tu fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

import css from '../css/styles.scss';

au lieu de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

require('../css/styles.scss');

Vois si ça peut t'aider.

**dubitoph** · 10/10/2019, 13h02

Merci beaucoup pour ton aide. Cependant, je ne parviens toujours pas à travailler avec les alias.

Suivant tes conseils, dans mon fichier app.js, j'ai fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
require('../css/app.scss');

Ensuite, dans webpack.config.js, j'ai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
...
var path = require('path');
...
    .setOutputPath('public/build/')
    .setPublicPath('/build')
...
    .addAliases({'@images': path.resolve(__dirname, '../images')})

Pour finir, dans mon fichier icons.scss, j'ai :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.icon{
  background-image: url('~@images/sprite.svg');
...

Lors de la compilation de webpack, j'ai cette erreur :

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleNotFoundError: Module not found: Error: Can't resolve '@images/sprite.svg' in 'C:\cmder\roadtrip\assets\css'

**Tsilefy** · 10/10/2019, 20h27

Utilise public/images dans l'alias:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.addAliases({'@images': path.resolve(__dirname, 'public/images')})

**dubitoph** · 11/10/2019, 14h01

Quand je fais cela, je n'ai plus d'erreur à la compilation, mais par contre l'image ne s'affiche pas.

**Tsilefy** · 11/10/2019, 20h30

Là j'avoue que je ne comprends pas. J'ai refait exactement la même manip, avec une autre installation de symfony, et j'ai bien l'image. Voici les versions que j'utilse:

Webpack encore 0.27.0 avec Webpack 4.36.1

Est-ce que tu peux poster le contenu de ton webpack.config.js ici?

**dubitoph** · 11/10/2019, 22h07

Un tout grand merci pour ton aide, ça fait plaisir... car il est vrai que je rame sévère

Voici le contenu de webpack.config.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
 
var Encore = require('@symfony/webpack-encore');
var path = require('path');
 
Encore
    .autoProvidejQuery()
 
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')
 
    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
     */
 
    .addEntry('app', './assets/js/app.js')
    .addEntry('indexAdvert', './assets/js/backend/indexAdvert.js')
    .addEntry('indexEquipment', './assets/js/backend/indexEquipment.js')
    .addEntry('indexSort', './assets/js/backend/indexSort.js')
    .addEntry('indexMark', './assets/js/backend/indexMark.js')
    .addEntry('indexFuel', './assets/js/backend/indexFuel.js')
    .addEntry('indexSeason', './assets/js/backend/indexSeason.js')
    .addEntry('indexDuration', './assets/js/backend/indexDuration.js')
    .addEntry('indexBooking', './assets/js/booking/indexBooking.js')
    .addEntry('indexUser', './assets/js/backend/indexUser.js')
    .addEntry('indexSubscription', './assets/js/backend/indexSubscription.js')
    .addEntry('indexVAT', './assets/js/backend/indexVAT.js')
    .addEntry('VAT', './assets/js/backend/VAT.js')
    .addEntry('indexRating', './assets/js/backend/indexRating.js')
    .addEntry('vehicleCreation', './assets/js/advert/vehicleCreation.js')
    .addEntry('photosCreation', './assets/js/advert/photosCreation.js')
    .addEntry('periodsCreation', './assets/js/advert/periodsCreation.js')
    .addEntry('pricesCreation', './assets/js/advert/pricesCreation.js')
    .addEntry('VariousCostsCreation', './assets/js/advert/VariousCostsCreation.js')
    .addEntry('bookingCreation', './assets/js/booking/bookingCreation.js')
    .addEntry('ownerCreation', './assets/js/user/ownerCreation.js')
    .addEntry('ratingManagement', './assets/js/rating/ratingManagement.js')
    .addEntry('showAdvert', './assets/js/advert/showAdvert.js')
    .addEntry('advertsSearch', './assets/js/advert/advertsSearch.js')
    .addEntry('home', './assets/js/home/home.js')
    .addEntry('payment', './assets/js/payment/payment.js')
    .addEntry('registration', './assets/js/security/registration.js')
    .addEntry('threads', './assets/js/communication/threads.js')
    .addEntry('bookingRequestsManagement', './assets/js/booking/bookingRequestsManagement.js')
    .addEntry('bookingRemoving', './assets/js/booking/bookingRemoving.js')
    .addEntry('profile', './assets/js/user/profile.js')
    .addEntry('ownerAdverts', './assets/js/advert/ownerAdverts.js')
    .addEntry('editOwner', './assets/js/user/editOwner.js')
 
    .addEntry('calendar', './assets/css/calendar.css')
 
    .addAliases({'@images': path.resolve(__dirname, 'App/public/images')})
 
    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()
 
    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())
 
    // enables Sass/SCSS support
    .enableSassLoader()
 
    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()
 
    // uncomment if you're having problems with a jQuery plugin
    //.autoProvidejQuery()
 
    // uncomment if you use API Platform Admin (composer req api-admin)
    //.enableReactPreset()
    //.addEntry('admin', './assets/js/admin.js')
 
    .addLoader({
        test: /\.(png|jpg|jpeg|gif|ico|svg)$/,
        use: [{
            loader: 'file-loader',
            options: {
                name: '[path][name].[hash:8].[ext]',
                context: './assets',
            }
        }]
    })
;
 
module.exports = Encore.getWebpackConfig();

**Henry22** · 12/10/2019, 20h13

Bonjour,

Moi, également j'ai réussi à afficher l'image. Voici mon code:

webpack.config.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
var Encore = require('@symfony/webpack-encore');
var CopyWebpackPlugin = require('copy-webpack-plugin'); // this line tell to webpack to use the plugin
 
var path = require('path');
 
Encore
    .addAliases({'@images': path.resolve(__dirname, 'public/images')})
 
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
 
    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
     */
    .addEntry('app', './assets/js/app.js')
 
    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
 
    .enableSingleRuntimeChunk()
 
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())
 
    // enables Sass/SCSS support
    .enableSassLoader()
 
    // uncomment if you're having problems with a jQuery plugin
    .autoProvidejQuery()
 
    .addPlugin(new CopyWebpackPlugin([
        { from: './assets/images', to: 'images' }
    ]))
;
 
module.exports = Encore.getWebpackConfig();

assets/app.scss

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
@import "~bootstrap/scss/bootstrap";
 
body {
    background-image: url('~@images/sprite.svg')
}

yarn encore dev me génère bien le svg et il s'affiche bien en fond d'écran.

**Tsilefy** · 13/10/2019, 04h47

Tu t'es perdu les pédales alors que la réponse était dans ton premier message.

Envoyé par dubitoph

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.addAliases({'@images': path.resolve(__dirname, 'App/public/images')})

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.addAliases({'@images': path.resolve(__dirname, 'public/images')})

**dubitoph** · 13/10/2019, 14h02

Vraiment, un tout grand merci à vous deux pour votre aide...

Effectivement, j'ai tenté beaucoup de choses, même

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.addAliases({'@images': path.resolve(__dirname, 'App/public/images')})

J'ai refais avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

.addAliases({'@images': path.resolve(__dirname, 'public/images')})

mais ça ne fonctionne toujours pas.

Je me suis dit que c'était peut-être dû au fait que l'appel de l'image se faisait à partir d'un autre fichier que l'app.scss, mais non car lorsque je fais des tests depuis ce fichier, les images ne s'affichent pas non plus.

Autre question que je me pose : j'utilise vichUploader et liip_imagine. Est-ce qu'il y a des interactions possibles? Je vais me mettre à fouiller de ce côté...

**Tsilefy** · 14/10/2019, 02h12

Webpack ne touche pas à Symfony et Symfony ne touche pas à Webpack, je ne vois pas comment ces 2 bundles pourraient interférer.

Vérifie bien que:
- tu inclues tes fichiers css dans le fichier js

- Et que l'inclusion se fait par require et pas par import.

**dubitoph** · 14/10/2019, 10h29

Oui, en fait mon flux est le suivant :

Dans webpack.config.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
var Encore = require('@symfony/webpack-encore');
 
var path = require('path');
 
Encore
    .autoProvidejQuery()
 
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
...
    .addAliases({'@images': path.resolve(__dirname, 'public/images')})
...
    .addLoader({
        test: /\.(png|jpg|jpeg|gif|ico|svg)$/,
        use: [{
            loader: 'file-loader',
            options: {
                name: '[path][name].[hash:8].[ext]',
                context: './assets',
            }
        }]
    })
;
 
module.exports = Encore.getWebpackConfig();

Ensuite, dans mon app.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
require('../css/app.scss');
...

Dans mon app.scss :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
...
@import "icons";
...

Et enfin, dans mon icon.scss :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
.icon{
  background-image: url('~@images/sprite.svg');
...

Mon fichier sprite.svg se trouve lui dans App/public/images.

Le css généré est suivant :

.icon {
background-image: url(/build/images/sprite.56e5c9c8.svg);

L'image référencée dans le css généré (sprite.56e5c9c8.svg) se trouve bien dans App/public/build/images et contient ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
module.exports = __webpack_public_path__ + "_/public/images/sprite.e9a8abfa.svg";

Par contre l'image référencée dans ce dernier fichier (sprite.e9a8abfa.svg) n'existe pas dans App//public/images. Je ne comprends pas pourquoi il référencie sprite.e9a8abfa.svg au lieu de sprite.svg.

Cependant, même lorsque je modifie moi-même le fichier sprite.56e5c9c8.svg de cette manière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
module.exports = __webpack_public_path__ + "_/public/images/sprite.svg";

l'image ne s'affiche pas.

En vérifiant dans mon fichier manifest.json, j'ai bien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
  "build/images/sprite.svg": "/build/images/sprite.56e5c9c8.svg"

Donc, manifestement l'erreur provient de ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
module.exports = __webpack_public_path__ + "_/public/images/sprite.e9a8abfa.svg";

Mais je ne vois absolument pas comment corriger cette compilation par webpack.

EDIT : une autre information : lorsque, dans mon app.js, je fais ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
console.log("public path", __webpack_require__.p);

j'obtiens ceci sur la console :

public path /build/

**Tsilefy** · 15/10/2019, 05h32

Désactives file-loader dans weback.config.js pour voir?

**dubitoph** · 15/10/2019, 10h27

Effectivement, ça provient bien de là! Un tout grand merci pour ton aide si précieuse

**Tsilefy** · 16/10/2019, 02h14

Youpi!

Maintenant, il va falloir que tu te debrouilles pour faire marcher les deux ensemble :-)

Webpack Encore utilisation des alias [4.x]

Symfony PHP

Discussions similaires

Partager

Partager