Webpack Encore utilisation des alias

Version imprimable

08/10/2019, 14h49
dubitoph

Webpack Encore utilisation des alias
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:

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:

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 :

Citation:

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:

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.
08/10/2019, 22h18
Henry22

Salut,

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

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

@+
09/10/2019, 11h41
dubitoph

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...
10/10/2019, 02h54
Tsilefy

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:

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

au lieu de

Code:

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

Vois si ça peut t'aider.
10/10/2019, 13h02
dubitoph
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:

1 2 require('../css/app.scss');
Ensuite, dans webpack.config.js, j'ai :
Code:

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:

1 2 3 4 .icon{ background-image: url('~@images/sprite.svg'); ...
Lors de la compilation de webpack, j'ai cette erreur :

Citation:

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'
10/10/2019, 20h27
Tsilefy

Utilise public/images dans l'alias:

Code:

.addAliases({'@images': path.resolve(__dirname, 'public/images')})
11/10/2019, 14h01
dubitoph

Quand je fais cela, je n'ai plus d'erreur à la compilation, mais par contre l'image ne s'affiche pas.
11/10/2019, 20h30
Tsilefy

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?

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:

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();

Bonjour,

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

webpack.config.js

Code:

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:

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.

13/10/2019, 04h47
Tsilefy

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

Citation:

Envoyé par dubitoph

Code:

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

Code:

.addAliases({'@images': path.resolve(__dirname, 'public/images')})
13/10/2019, 14h02
dubitoph

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

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

Code:

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

J'ai refais avec

Code:

.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é...
14/10/2019, 02h12
Tsilefy

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.

Oui, en fait mon flux est le suivant :

Dans webpack.config.js :
Code:

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:

1 2 3 require('../css/app.scss'); ...
Dans mon app.scss :
Code:

1 2 3 4 ... @import "icons"; ...
Et enfin, dans mon icon.scss :
Code:

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 :

Citation:

.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:

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:

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:

1 2 "build/images/sprite.svg": "/build/images/sprite.56e5c9c8.svg"
Donc, manifestement l'erreur provient de ceci :
Code:

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:

1 2 console.log("public path", __webpack_require__.p);
j'obtiens ceci sur la console :

Citation:

public path /build/

15/10/2019, 05h32
Tsilefy

Désactives file-loader dans weback.config.js pour voir?
15/10/2019, 10h27
dubitoph

Effectivement, ça provient bien de là! Un tout grand merci pour ton aide si précieuse ;)
16/10/2019, 02h14
Tsilefy

Youpi!

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