webpack.config.js and cli args different behavior

[kricha]

version 1.5.0

if i use in webpack.config.json

Encore.configureDevServerOptions(options => {
    options.hot = true;
    options.firewall = false;
    options.public = 'https://somesite.com/webpack/';
    options.port = 8080;
});

seems that works only .hot and .firewall option, and manifest.json have no changes in host and return localhost:8080 in all url's: "build/js/app.js": "http://localhost:8080/build/js/app.js",

but if i ran webpack dev server with args --public https://somesite.com/webpack/ --port 8080 --hot --no-firewall, manifest.json becomes as expected: "build/js/app.js": "https://somesite.com/webpack/build/js/app.js", but socket tries to connect localhost: and i can't find how to change this.

for what i need this: i'm trying to proxy webpack through nginx with valid certs to avoid browser notices.

[stof]

that's because the CLI arguments are not configuring only the dev server options. For instance, the public path is also used by the config of the manifest plugin.

Use the Encore method to configure the public path instead, so that it impacts all places.

[kricha]

that's because the CLI arguments are not configuring only the dev server options. For instance, the public path is also used by the config of the manifest plugin.

Use the Encore method to configure the public path instead, so that it impacts all places.

i tried to do that, but unsuccessfully. It's unclear how to change localhost:8080 to site.com/path/

[weaverryan]

Have you used Encore.publicPath()? That’s what Stof was referring to. That method controls the manifest prefix, though I’ll admit that this stuff gets complex when it comes to the dev server and configuring this stuff.

btw, in case it helps, this file - https://github.com/symfony/webpack-encore/blob/main/lib/config/path-util.js - has at least one function (the last one) if not 2 that are related to this - seeing that logic might help :).

Cheers!

[kricha]

@weaverryan hello, i've tried setPublicPath, setOutputPath, setManifestKeyPrefix and in different combinations - all this give me zero profit. That's why i've created this issue. Maybe i'm wrong, i'll show you my webpack config:

const Encore = require('@symfony/webpack-encore');
const CopyWebpackPlugin = require('copy-webpack-plugin');
// const CompressionPlugin = require('compression-webpack-plugin');

// 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
    .setOutputPath('public/build/')
    .setPublicPath('/build')

    .addEntry('js/app', './assets/js/app.js')
    .addEntry('js/front', './assets/js/front.js')
    .addStyleEntry('css/app', './assets/scss/app.scss')
    .addStyleEntry('css/front', './assets/sass/front.scss')
    .addEntry('js/pages/user', './assets/js/pages/user.js')
    .addEntry('js/pages/country', './assets/js/pages/country.js')
    .addEntry('js/pages/menu', './assets/js/pages/menu.js')
    .addEntry('js/pages/autocomplete', './assets/js/pages/autocomplete.js')
    .addEntry('js/pages/discount', './assets/js/pages/discount.js')
    .addEntry('js/pages/delivery_method', './assets/js/pages/delivery_method.js')
    .addEntry('js/pages/custom_field', './assets/js/pages/custom_field.js')
    .addEntry('js/pages/asterisk_queue', './assets/js/pages/asterisk_queue.js')
    .addEntry('js/pages/product', './assets/js/pages/product.js')
    .addEntry('js/pages/source', './assets/js/pages/source.js')
    .addEntry('js/components/datagrid', './assets/js/components/datagrid.js')
    .addEntry('js/pages/order', './assets/js/pages/order.js')
    .addStyleEntry('css/pages/asterisk_queue', './assets/scss/pages/asterisk_queue.scss')
    .addStyleEntry('css/pages/autocomplete', './assets/scss/pages/autocomplete.scss')
    .addStyleEntry('css/pages/discount', './assets/scss/pages/discount.scss')
    .addStyleEntry('css/pages/order', './assets/scss/pages/order.scss')
    .addStyleEntry('css/pages/country', './assets/scss/pages/country.scss')
    .addStyleEntry('css/pages/notification', './assets/scss/pages/notification.scss')
    .addStyleEntry('css/pages/user', './assets/scss/pages/user.scss')
    .addStyleEntry('css/pages/product', './assets/scss/pages/product.scss')
    .addStyleEntry('css/pages/deliveryMethod', './assets/scss/pages/deliveryMethod.scss')
    .addStyleEntry('css/pages/menu', './assets/scss/pages/menu.scss')
    .addStyleEntry('css/pages/authentication', './assets/scss/pages/authentication.scss')
    .addStyleEntry('css/components/choices', './assets/scss/components/choices.scss')

    .enableStimulusBridge('./assets/controllers.json')
    .splitEntryChunks()
    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })
    .enableSassLoader()

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

    .addPlugin(new CopyWebpackPlugin({
        patterns: [
            {from: './assets/images', to: 'static/images'},
            {from: './assets/icons', to: 'icons'}
        ]
    }))
//     .addPlugin(new CompressionPlugin({
//         filename: "[path].gz",
//         algorithm: "gzip",
//         test: /\.(svg|png|js|css|woff2|ttf|woff|eot)$/,
//         threshold: 1024,
//         minRatio: 0.8
//     }))
//     .addPlugin(new CompressionPlugin({
//         filename: "[path].br",
//         algorithm: "brotliCompress",
//         test: /\.(svg|png|js|css|woff2|ttf|woff|eot)$/,
//         threshold: 1024,
//         compressionOptions: {level: 11},
//         minRatio: 0.8
//     }))
;

Encore.configureWatchOptions(watchOptions => {
    watchOptions.poll = 250; // check for changes every 250 milliseconds
});

Encore.configureDevServerOptions(options => {
    options.https = true;
    options.hot = true;
    options.firewall = false;
    // options.port = 8080;
});

module.exports = Encore.getWebpackConfig();

thats work with localhost:8080

but i really can't find a way to change localhost:8080 to site.com/azaza in manifest.json :(