contao 5.3 mit webpack-encore, js Datei functioniert nicht

[migs]

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

Der outputPath ist "public/build"

<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?

[Spooky]

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

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

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

[migs]

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.

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

[Spooky]

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

[migs]

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

Das war falsch

.enableSingleRuntimeChunk()

. Die richtige ist

.disableSingleRuntimeChunk()