@symfony/webpack-encore

What is @symfony/webpack-encore?

@symfony/webpack-encore is a wrapper for Webpack that simplifies the process of setting up and managing a Webpack configuration. It is particularly useful for Symfony projects but can be used in any JavaScript project. It provides a clean and fluent API to handle common tasks such as compiling JavaScript, CSS, and other assets.

What are @symfony/webpack-encore's main functionalities?

Compiling JavaScript

This code sample demonstrates how to set up a basic Webpack configuration to compile JavaScript files. It specifies the output path, public path, and entry point for the JavaScript files. It also enables source maps and versioning for production builds.

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

Encore
  .setOutputPath('public/build/')
  .setPublicPath('/build')
  .addEntry('app', './assets/js/app.js')
  .enableSingleRuntimeChunk()
  .cleanupOutputBeforeBuild()
  .enableSourceMaps(!Encore.isProduction())
  .enableVersioning(Encore.isProduction());

module.exports = Encore.getWebpackConfig();

Compiling CSS

This code sample shows how to configure Webpack to compile CSS files. It adds a style entry point and enables the Sass and PostCSS loaders to process CSS and SCSS files.

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

Encore
  .setOutputPath('public/build/')
  .setPublicPath('/build')
  .addStyleEntry('styles', './assets/css/styles.css')
  .enableSassLoader()
  .enablePostCssLoader();

module.exports = Encore.getWebpackConfig();

Handling Images and Fonts

This code sample demonstrates how to handle image and font files in a Webpack configuration. It uses the file-loader to process these assets and specifies the output directory and naming convention for the files.

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

Encore
  .setOutputPath('public/build/')
  .setPublicPath('/build')
  .addEntry('app', './assets/js/app.js')
  .addLoader({
    test: /\.(png|jpg|jpeg|gif|ico|svg|webp)$/, 
    loader: 'file-loader',
    options: {
      name: 'images/[name].[hash:8].[ext]'
    }
  })
  .addLoader({
    test: /\.(woff|woff2|ttf|eot|otf)$/, 
    loader: 'file-loader',
    options: {
      name: 'fonts/[name].[hash:8].[ext]'
    }
  });

module.exports = Encore.getWebpackConfig();

Other packages similar to @symfony/webpack-encore

webpack

Webpack is a powerful module bundler for JavaScript applications. It allows you to bundle JavaScript files for usage in a browser and has a rich ecosystem of plugins and loaders. Unlike @symfony/webpack-encore, Webpack requires more manual configuration and setup.

parcel

Parcel is a web application bundler that offers a zero-configuration setup. It automatically handles common tasks such as compiling JavaScript, CSS, and other assets. Parcel is easier to set up compared to @symfony/webpack-encore but may not offer the same level of customization.

rollup

Rollup is a module bundler for JavaScript that focuses on creating smaller and faster bundles. It is particularly well-suited for libraries and applications that need to be optimized for performance. Rollup requires more configuration compared to @symfony/webpack-encore but offers fine-grained control over the bundling process.

README

Webpack Encore: A Simple & Powerful Webpack API

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.

Encore is inspired by Webpacker and Mix, but stays in the spirit of Webpack: using its features, concepts and naming conventions for a familiar feel. It aims to solve the most common Webpack use cases.

Encore is made by Symfony and works beautifully in Symfony applications. But it can easily be used in any application... in any language!

Documentation

Read the Documentation on symfony.com or view a demo application: symfony/demo.

Changelog

0.27.0

• [Behavior Change] The Babel configuration sourceType default was changed from not being specified (so, the default module was used) to unambiguous. This is to help Babel's useBuiltIns functionality properly determine if a require or import should be automatically added to your files, based on that file's style - #555 thanks to @Lyrkan.

• Added JSX support to Vue! #553 thanks to @Kocal.

• Cleaned up the jsdoc in index.js to add better docs and better IDE auto-completion - #550 thank sto @Lyrkan.