contao 5.3 mit webpack-encore, js Datei functioniert nicht

Hallo zusammen,
ich habe webpack-encore installiert und die css und javascript Datei direkt in fe_page hinzugefügt.

Der outputPath ist "public/build"

HTML-Code:

---

<link rel="stylesheet" href="/build/app.css">
  <script src="/build/app.js"></script>

---

Die css Datei funktioniert, aber die javascript Datei nicht.

Ich habe auch script Tag in die erlaubt Tags hinzugefügt.

Hat jemand eine Idee, was ich machen muss?

Üblicherweise lässt du dir mit Webpack ja eine manifest.json generieren. Diese kannst du im System registrieren:

PHP-Code:

---

# config/config.yaml
framework:
    assets:
        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json' 


---

Danach kannst du folgendes im PHP fe_page Template ausführen:

PHP-Code:

---

<link rel="stylesheet" href="<?= $this->asset('app.css') ?>">
<script src="<?= $this->asset('app.js') ?>" async></script>

---

Vielen Dank Spooky für die Antwort.
Leider hat es nicht funktioniert.

ich habe auch versucht, die js-Datei in den Theme-Ordner zu kopieren und sie in das Theme einzufügen, aber auch das hat nicht funktioniert.
Nur das css hat funktioniert.

HTML-Code:

---

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

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

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
    *
    * Each entry will result in one JavaScript file (e.g. app.js)
    * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
    */
    .addEntry('app', './files/theme/assets/app.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())

    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })

    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // enables Sass/SCSS support
    .enableSassLoader()

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

    // uncomment if you use React
    //.enableReactPreset()

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

    // uncomment if you're having problems with a jQuery plugin
    .autoProvidejQuery()


    .enablePostCssLoader((options) => {
        options.postcssOptions = {
            plugins: () => [
                require('autoprefixer'),
            ]
        };
    })

    .copyFiles({
      from: './files/theme/assets/images',

        // optional target path, relative to the output dir
        to: './images/[path][name].[ext]',

        // if versioning is enabled, add the file hash too
        // to: 'images/[path][name].[hash:8].[ext]',

        // only copy files matching this pattern
        pattern: /\.(png|jpe?g|svg|ico|webp)$/,
    })

    // .copyFiles({
    //    from: './files/theme/assets/fonts',
    //
    //    // optional target path, relative to the output dir
    //    to: './fonts/[path][name].[ext]',
    //
    //    // if versioning is enabled, add the file hash too
    //    // to: 'images/[path][name].[hash:8].[ext]',
    //
    //    // only copy files matching this pattern
    //    pattern: /\.(woff|woff2|eot|ttf)$/,
    // })

;

module.exports = Encore.getWebpackConfig();

---

Mehr kann ich dir dazu auch nicht sagen. Ich nutze ein ähnliches Setup wie hier https://github.com/contao-association/website und das funktioniert.

Ich habe den Fehler gefunden :o;
in webpack.config.js

Das war falsch

HTML-Code:

---

.enableSingleRuntimeChunk()

---

. Die richtige ist

HTML-Code:

---

.disableSingleRuntimeChunk()

---