Contao-Camp 2024
Seite 2 von 2 ErsteErste 12
Ergebnis 41 bis 44 von 44

Thema: Webpack Encore

  1. #41
    Contao-Nutzer
    Registriert seit
    09.09.2015.
    Beiträge
    88

    Standard Webpack Encore Remote Bundle

    Da es in diesen Thread passt: Ich habe ein Bundle geschrieben, welches die Webpack Encore Konvertierung Remote auf einem Server ausführt. Dies hat in unserer Agentur den Vorteil, dass auch Nichtentwickler, nach Fertigstellung des Webprojektes Anpassungen am CSS/JS vornehmen können und kein Wissen zu Webpack Encore benötigen. Vielleicht hat der ein oder andere Interesse daran

    https://github.com/postyou/contao-we...-remote-bundle

  2. #42
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.896
    Partner-ID
    10107

    Standard

    Zitat Zitat von Franko Beitrag anzeigen
    Ähm, finde dazu nichts in der Doku ... ?
    Evtl. hat auch hierzu jemand weitere Infos ...
    Danke
    Spät aber doch: https://docs.contao.org/dev/framework/asset-management/

  3. #43
    Contao-Nutzer
    Registriert seit
    09.02.2024.
    Beiträge
    3

    Frage

    Hallo zusammen.
    ich versuche, die gleiche Idee in contao 5.3 zu implementieren, aber leider im nicht erfolgreich mit der js-Datei.
    die js-Datei funktioniert nicht richtig, wenn direkt über <script> eingefügt.
    Was könnte eine mögliche Lösung sein.

    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();
    fe_page.html5

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

  4. #44
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Scotland
    Beiträge
    33.896
    Partner-ID
    10107

    Standard

    Zitat Zitat von migs Beitrag anzeigen
    Hallo zusammen.
    ich versuche, die gleiche Idee in contao 5.3 zu implementieren, aber leider im nicht erfolgreich mit der js-Datei.
    die js-Datei funktioniert nicht richtig, wenn direkt über <script> eingefügt.
    Was könnte eine mögliche Lösung sein.

    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();
    fe_page.html5

    HTML-Code:
    <link rel="stylesheet" href="/build/app.css">
      <script src="/build/app.js"></script>
    https://community.contao.org/de/show...l=1#post582734
    » sponsor me via GitHub or PayPal or Revolut

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •