Symfony Webpack Encore, Multiple JS/CSS Files to one file

Question

I want to create one css/js file from multiple css/js files. Multiple addEntry not working, please check my code and give me the solution.

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

Encore
        // the project directory where compiled assets will be stored
        .setOutputPath('web/build/')
        // the public path used by the web server to access the previous directory
        .setPublicPath('/build')
        .cleanupOutputBeforeBuild()
        .enableSourceMaps(!Encore.isProduction())
        // uncomment to create hashed filenames (e.g. app.abc123.css)
        .enableVersioning(Encore.isProduction())
        // uncomment for legacy applications that require $/jQuery as a global variable
        //.autoProvidejQuery()
        // uncomment to define the assets of the project
        .addEntry('js/app', './assets/js/app.js')
        .addEntry('js/uploader', './assets/js/uploader.js')
        .addStyleEntry('css/icons', './assets/css/icons.scss')
        .addStyleEntry('css/app', './assets/css/app.scss')
        .addStyleEntry('css/uploader', './assets/css/uploader.scss')

        // uncomment if you use Sass/SCSS files
        .enableSassLoader()
        .enableBuildNotifications();

module.exports = Encore.getWebpackConfig();

And add common jQuery and after adding the js files some function is undefined, why?

I know it's an old question but fell free to mark my answer as accepted if you consider it was the solution. — Florian Hermann
– Florian Hermann, Commented Apr 11, 2019 at 20:28

Florian Hermann · Accepted Answer · 2018-06-01 09:16:52Z

11

You only need one addEntry call. The solution I use to do that is to create a main.js file where I import all the file. Something like this for example:

// CSS
import 'bootstrap/dist/css/bootstrap.min.css';
import './global.css';
import './easy-autocomplete.custom.css';

// JS
const $ = require('jquery/dist/jquery.min');
const jQuery = $;
import 'bootstrap';
import 'jscroll/jquery.jscroll';
import 'easy-autocomplete';
import './global.js';

And then you can use this file in your addEntry like this:

.addEntry('app', './assets/main.js')

After running Encore, you will get a web/build/app.js file and web/build/app.css file

answered Jun 1, 2018 at 9:16

Florian Hermann

7806 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gaius Over a year ago

thx you so much, I was stuck, and now I'm not anymore. Your a life saver.

eberhapa · Accepted Answer · 2018-07-31 06:53:18Z

5

Multiple .addStyleEntry will create multiple files. You can pass an array into .addStyleEntry to make a single css file out of multipe css/sass/less files like:

.addStyleEntry('style', ['./src/sass/style.scss', './node_modules/swiper/dist/css/swiper.css'])

This will create a style.css. The order of the array entries matches the output in the css file.

answered Jul 31, 2018 at 6:53

eberhapa

3783 silver badges12 bronze badges

Collectives™ on Stack Overflow

Symfony Webpack Encore, Multiple JS/CSS Files to one file

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related