V9: webpack.mix js from outside of server folder

If I use a build folder next to the theme folder and this webpack.mix.js:

mix.setPublicPath('../theme_name');

mix
    .sass('assets/scss/presets/default/main.scss', 'css/skins/default.css')
    .js('assets/js/main.js', '');

it places the main.js into the theme’s folder, i.e. /srv/www/htdocs/c9/application/themes/theme_name.

But if I want to use the build folder outside of the server, say in my home, but to place the compiled assets still into the same server folder I set the public path to:

mix.setPublicPath('/srv/www/htdocs/c9/application/themes/theme_name');

that still builds the default.css in the right server folder, but it puts the js into

/srv/www/htdocs/c9/application/themes/theme_name/srv/www/htdocs/c9/application/themes/theme_name

Can webpack work with outside build folders?

You have to tell webpack where to write the js file.

.js('assets/js/main.js', '<your desired folder for the js file>');

Before the comma you set the source path and behind the comma the target path.

When you take a look at afixia’s bedrock package you can put the build folder where you want. As long as you move the whole folder and adjust the paths in webpack.mix.js.

No, it doesn’t work that way, if you put any folder in there, the whole chain of folders will be created in the theme and the main.js will be dumped into it. I want the main.js to be simply in the theme folder.

I have the same problem. Trying to go through the tutorial for the flintstones theme, but running the local development on MAMP.

my webpack.mix.js includes:

var publicDir = '/Applications/MAMP/htdocs/dlm/application/themes/flintstone';
mix.setPublicPath(publicDir);

mix
    .sass('assets/scss/main.scss', 'css/main.css')
    .js('assets/js/main.js', '/js/main.js');

Which puts the CSS in the right place but puts main.js here:
/Applications/MAMP/dlm/htdocs/application/themes/flintstone/Applications/MAMP/htdocs/dlm/application/themes/flintstone/js/main.js

Can anyone shed any light on it please?

Thanks.

This seems to solve the problem.

Looked a bit further into webpack.mix.js and found an answer:

var publicDir = '/Applications/MAMP/htdocs/dlm/application/themes/flintstone';
mix.setPublicPath(publicDir);

mix
    .webpackConfig({
        output: {
            filename:'js/main.js',
            path: '/Applications/MAMP/htdocs/dlm/application/themes/flintstone',
        },
    })
    .sass('assets/scss/main.scss', 'css/main.css')
    .js('assets/js/main.js', 'js/main.js');

This appears to be put both main.css and main.js into the correct folders and the Concrete theme appears to be building correctly atm.

As I understand it, the .webpackConfig section overrides the ‘output’ file aspect of the .js(‘assets/js/main.js’, ‘js/main.js’); line.

If I replace the .webpackConfig .filename with ‘js/[name].js’, the destination then includes the path, again creating ‘js/Applications/MAMP/htdocs/dlm/application/themes/flintstone/main.js’.

Hope this helps.

1 Like