Forum : Symfony4.2 encore (webpack)

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

J'ai installer webpack dans mon projet et ça généré toute la configue pour fonctionner normalemnt. En suite j'ai fait yarn install pour charger toutes les dépendance. j'ai continué en chargeant les liens pour le fichier css et javascript dans mon base.html.twig. Je vous montre mes différents fichiers

// webpack.config.js

var Encore = require('@symfony/webpack-encore');

Encore
    // 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('page1', './assets/js/page1.js')
    //.addEntry('page2', './assets/js/page2.js')

    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
    .splitEntryChunks()

    // 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 @babel/preset-env polyfills
    .configureBabel(() => {}, {
        useBuiltIns: 'usage',
        corejs: 3
    })
    .configureBabel(function(babelConfig) {
        babelConfig.presets.push('@babel/preset-flow');
        babelConfig.plugins.push('styled-jsx/babel');
    }, {
        include_node_modules: ['foundation-sites'],
        exclude: /bower_components/
    })

    // enables Sass/SCSS support
    //.enableSassLoader()

    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()

    // uncomment to get integrity="..." attributes on your script & link tags
    // requires WebpackEncoreBundle 1.4 or higher
    //.enableIntegrityHashes()

    // 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')
;

var config = Encore.getWebpackConfig();

config.externals.jquery = 'jQuery'

module.exports = config

<!-- base.html.twig -->

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Welcome!{% endblock %}</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css">
    <link rel="stylesheet" href="{{ asset('build/app.css') }}">
    {% block stylesheets %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-info">
    <a class="navbar-brand" href="{{ path('home') }}">Mon Agence</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link {% if current_menu is defined and current_menu == 'properties' %}active{% endif %}" href="{{ path('property.index') }}">Acheter</a>
            </li>
        </ul>
        {% if app.user %}
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="{{ path('logout') }}" class="nav-link">sortir</a>
                </li>
            </ul>
        {% endif %}
    </div>
</nav>
{% block body %}{% endblock %}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<script src="{{ asset('build/app.js') }}"></script>
{% block javascripts %}{% endblock %}
</body>
</html>

Ce que je veux

Je veux comprendre pourquoi, lorsque je recharge ma page, un formulaire est automatiquement généré et me damande un nom d'utilisateur et un mot de passe? Aussi ces nom d'utili... et mot de pass, je les trouve où?

Ce que j'obtiens

J'obtiens un formulaire d'authentification qui sort de nul part. Et j'inspecte mon ma page, la console m'affiche des erreurs 401. Pourquoi?

Symfony4.2 encore (webpack)

Ce que je fais

Ce que je veux

Ce que j'obtiens

1 réponse