Discussion on: Gulp vs Web-pack

[Olivier “Ölbaum” Scherler]

I would recommend checking out Webpack Encore:

Webpack Encore is a simpler way to integrate Webpack into your application. It wraps Webpack, giving you a clean & powerful API for bundling JavaScript modules, pre-processing CSS & JS and compiling and minifying assets. Encore gives you a professional asset system that's a delight to use.

It generates Webpack configuration for a lot of common use cases via some method calls on its main object. I think it’s a good way to get started with Webpack without being directly exposed to the potential complexity of the full configuration.

For example, in a personal project, I have this, which compiles a custom Bootstrap (with my overriden variables) in my_bootstrap.css and my_bootstrap.js, and the rest in app.css and app.js. So compilation is super fast because Bootstrap is not recompiled unless I touch its files.

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

Encore
    // directory where compiled assets will be stored
    .setOutputPath('site/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')

    // Bootstrap CSS and JS, shared with each entry.
    .createSharedEntry( 'my_bootstrap', './assets/js/my_bootstrap.js' )

    // Add 1 entry for each "page" of your app (including one that's 
    // included on every page - e.g. "app"). Each entry will result in
    // one JavaScript file (e.g. app.js) and one CSS file (e.g. app.css)
    // if you JavaScript imports CSS.
    .addEntry( 'app', './assets/js/app.js' )

    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableSourceMaps( ! Encore.isProduction() )
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning( Encore.isProduction() )

    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()

    // uncomment if you use Sass/SCSS files
    .enableSassLoader()
    // needed to compile Bootstrap, it relies on autoprefixer
    .enablePostCssLoader()

    // uncomment if you're having problems with a jQuery plugin
    //.autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

[Kim John]

Thanks, I will look into it.