A simple but powerful API for processing & compiling assets built around Webpack

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-processi

Information

Category: JavaScript / Build Tools
Watchers: 50
Star: 2.1k
Fork: 193
Last update: Jun 24, 2022

Resource links

http://symfony.com/doc/current/frontend.html

https://github.com/symfony/webpack-encore

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.

205 Open More issues

Closed

Upgrade to Webpack 4

As you might have already seen: Webpack 4 beta is out

This beta release is pretty much stable and will be released as such in a month.

As promised, we will wait a month from today before releasing webpack 4 stable

The new release offers a lot simpler configuration and better compression. This should reduce the amount of code in encore and yield better results in production.

opened Jan 25, 2018 by thekonz 41

Closed

PHPStorm integration

PHPStorm can interpret standart Webpack config file but not the Encore webpack.config.js :

Can't analyse webpack.config.js: coding assistance will ignore module resolution rules in this file. Possible reasons: this file is not a valid webpack configuration file or its format is not currently supported by the IDE

I made this workaround to handle this : https://gist.github.com/plfort/93da0ee1465f1d7f929fe5d9e6307532

Do you have a better solution ?

docs

opened Jan 5, 2018 by plfort 36

Closed

How are static assets handled?

A question by @jrobeson on Symfony Slack:

So, with the manifest file approach for versioning, how are static assets handled? like referenced images that aren't in CSS.

I was previously using the hashed-asset-bundle, but you can't use the new manifest versioning with it.

Feature

opened Jun 16, 2017 by javiereguiluz 32

Closed

Added support for image optimiziation with image-webpack-loader

as discussed with @weaverryan here's a first POC for adding image optimization. Looking for general feedback as this is my first time working with Encore, so I'm not sure if my approaches make sense.

~~The method and feature name are kinda confusing due to the dependencies. We're using image-webpack-loader, which internally uses imagemin to optimize images. Not sure if stuff should be named after the loader (as of now), or rather something like enableImageOptimization() or name the feature imagemin instead of image-webpack…~~

To enable image optimization, install image-webpack-loader and call enableImagemin() in the Encore config. Further image configuration is available by passing options to the method exactly as in image-webpack-loader.

Encore.enableImagemin({
    mozjpeg: {
        progressive: true,
        quality: 65
    },
    // optipng.enabled: false will disable optipng
    optipng: {
        enabled: false,
    },
    pngquant: {
        quality: [0.65, 0.90],
        speed: 4
    },
    gifsicle: {
        interlaced: false,
    },
    // the webp option will enable WEBP
    webp: {
        quality: 75
    }
});

#SymfonyHackday

opened Nov 23, 2019 by aschempp 26

Closed

Update Webpack to v5 (+ other dependencies)

Last week Webpack added a compat layer to its v5 alpha that allows the mini-css-extract-plugin to run on it (with deprecated messages). Since we include that plugin by default (and a lot of our tests relie on it) it was the main thing blocking us from preparing the migration.

I basically started from #564 which was updating some dependencies, enabling CSS HMR when needed and adding a configureMiniCssExtractPlugin(...) method, but with a few changes:

no more inconsistent hashes checks for the enableVersioning applies to js, css & manifest test: it seems to be working fine by default
no more embedding the webpack-manifest-plugin into our code: https://github.com/danethurber/webpack-manifest-plugin/issues/167 is still an issue but @mastilver has been working on the project lately (which is why the plugin works with Webpack 5) and a fix has already been merged on the next branch, so it's probably only a matter of time now :). Edit: Fixed in [email protected]^3.0.0-rc
removal of Node 8 compatibility

So now, about the state of that PR:

0 failing test left:

~6 tests that will probably be fixed by https://github.com/webpack/webpack/pull/10661 in [email protected]: Uncaught Error: Error when running the browser: Error: Error when running the browser: ReferenceError: mod is not defined~
~All the 7 tests related to the vue-loader are failing with a Cannot find module 'webpack/lib/RuleSet error message (see: https://github.com/vuejs/vue-loader/issues/1599).~
~1 test related to the webpack-manifest-plugin issue previously mentioned~
~1 test related to createSharedEntry() which doesn't seem to work properly~
~1 test related to Babel that doesn't transform an arrow function as expected~

A lot of deprecation notices (but most, if not all, of them are triggered by vendors), for instance:

Compilation.hooks.normalModuleLoader was moved to NormalModule.getCompilationHooks(compilation).loader
Module.id: Use new ChunkGraph API
Module.updateHash: Use new ChunkGraph API
Chunk.modulesIterable: Use new ChunkGraph API
ChunkGroup.getModuleIndex2 was renamed to getModulePostOrderIndex
Compilation.chunks was changed from Array to Set (using Array method 'reduce' is deprecated)
chunk.files was changed from Array to Set (using Array method 'reduce' is deprecated)

Some modules do not declare they are compatible with Webpack 5 yet (warning messages during yarn install): this shouldn't be an issue unless those modules require a major version upgrade to be officialy compatible (in which case breaking changes could impact us).

We're still using [email protected] which may not support Webpack 5. It currently seems to be OK but we should probably upgrade to [email protected] (currently in beta). I took a quick glance at it and it probably won't be an easy thing to do, mainly because of how our "runtime context" works and how the new version of the CLI calls Webpack (through another process).

opened Oct 4, 2019 by Lyrkan 25

Closed

Question: why aren't we allowed to make multiple shared entries?

Hi,

Just today I noticed that in webpack-encore it's impossible to create two shared entries? For example I'd like to have one for my frontend and one for my backend because different scripts will be on each area of my app but they will still be reused through each app's respective area.

However in node_modules/@symfony/webpack-encore/lib/WebpackConfig.js:199

it's throwing an exception createSharedEntry() cannot be called multiple times: you can only create *one* shared entry.

If I disable that check it creates the two shared entries with different names normally and they seem to work OK. Is there a specific reason not to create multiple shared entries?

Thanks in advance.

Feature

opened Sep 8, 2017 by ioweb-gr 24

Open

How to develop a webpack package locally ?

Hi,

I am developing a Symfony bundle using classic Sf features (views, controllers, entities,...;) but with also JS stimulus controllers and SCSS. So, the project stack is Npm + Webpack Encore + Stimulus + PHP + Symfony 6.1.

By installing the local composer package, Flex should consider my bundle as an embedded node module, but Flex does nothing, I linked it manually, this works but not perfectly and I would do it the legit way.

To develop the bundle, I created a package.json in the assets folder in a separate project. The package is added to the project by its local path on my file system using "file:", then I run npm run watch, this is working properly, sometimes I am getting errors with missing core-js. But by developing locally, I would changes to be detected by webpack to compile the new changes. Using "file:", yarn/node seems to create a copy of my sources, so it won't listen the sources for changes.

I also tried using link: but webpack is failing to compile.

So the whole thing is a bunch of wonky repairs and I did not find a good tutorial to explain how to do that with Webpack Encore + Sf 6.1.

How to develop a webpack package locally ? How is this recommended ? Considering, I can not run a symfony or docker server, everything is on a local VM and PhpStorm is deploying automatically on it..

NB: I am looking for information, I tried stackoverflow with no success.

opened Jun 23, 2022 by Cartman34 2

Open

"moduleNameMapper" can't resolve alias

Hi, I have aliases in my webpack.config.js

.addAliases({
        '~': path.resolve(__dirname, 'assets'),
        'images': path.resolve(__dirname, 'assets/base/images')
    })

But when I try to use module "moduleNameMapper" in package file for settings jest I have error

"jest": {
        "moduleFileExtensions": [
            "js",
            "ts",
            "json",
            "vue"
        ],
        "moduleNameMapper": {
            "^~/(.*)": "<rootDir>/assets/$1"
        },
        "transform": {
            ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
            "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
        },
        "collectCoverage": true,
        "transformIgnorePatterns": [
            "<rootDir>/node_modules/(?!variables/.*)"
        ],
        "coverageReporters": [
            "text",
            "html"
        ],
        "collectCoverageFrom": [
            "<rootDir>/assets/src/**"
        ],
        "testEnvironment": "jsdom"
    },

**Configuration error:

Could not locate module ~/components/Modal mapped as:
/Users/Cap/Desktop/project/assets.

Please check your configuration for these entries:
{
  "moduleNameMapper": {
    "/^~\/(.*)$/": "/Users/Cap/Desktop/project/assets"
  },
  "resolver": undefined
}**

Can anyone suggest what is the problem?

opened Jun 20, 2022 by CapInSpase 0

Open

Bump eventsource from 1.1.0 to 1.1.1

Bumps eventsource from 1.1.0 to 1.1.1.

Changelog

Sourced from eventsource's changelog.

1.1.1

Do not include authorization and cookie headers on redirect to different origin (#273 Espen Hovlandsdal)

Commits

aa7a408 1.1.1
56d489e chore: rebuild polyfill
4a951e5 docs: update history for 1.1.1
f9f6416 fix: strip sensitive headers on redirect to different origin
See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
@dependabot use these labels will set the current labels as the default for future PRs for this repo and language
@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies

opened May 31, 2022 by dependabot[bot] 0

Open

[style-loader] Unable to import css file for lazyStyleTag injection method?

We're creating a web component that uses shadow dom. We're attempting to follow this setup for style-loader.

Unfortunately when we run

import styles from './stylesheet.css';

We are getting

export 'default' (imported as 'styles') was not found in './stylesheet.css' (module has no exports)

We don't get any errors when we run

import './stylesheet.css';

But we also get...nothing happening.

We need to be able to import the stylesheet under a given name so we can hook it into our webcomponent with

styles.use(this.shadowRoot);

Here is our encore config file.

/** @type {Encore} */
const Encore = require('@symfony/webpack-encore');

if (!Encore.isRuntimeEnvironmentConfigured()) {
  Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore.setOutputPath('../../public/embed-react/');
Encore.setPublicPath('/embed-react');

Encore.addEntry('embed-react', './embed-react.js');

Encore.enableTypeScriptLoader();
Encore.enableReactPreset();

Encore.enablePostCssLoader(config => {
  config.postcssOptions = {
    ...config.postcssOptions,
    plugins: [
      ...(config.postcssOptions?.plugins ?? []),
      ['postcss-import', {}],
    ],
  };
});

Encore.configureBabel(config => {
  config.plugins.push('@babel/plugin-proposal-export-default-from');
  config.plugins.push('@babel/plugin-proposal-optional-chaining');
  config.plugins.push('@babel/plugin-proposal-nullish-coalescing-operator');
});


Encore.disableSingleRuntimeChunk();
Encore.cleanupOutputBeforeBuild();
Encore.enableSourceMaps(!Encore.isProduction());

Encore.configureStyleLoader(options => ({
  ...options,
  injectType: 'lazyStyleTag',
  insert: function insertIntoTarget(element, options) {
    const parent = options.target || document.head;
    parent.appendChild(element);
  },
}));

Encore.configureDevServerOptions(options => ({
  ...options,
  allowedHosts: 'all',
  client: {
    webSocketURL: 'wss://localhost:8080/ws',
  },
  https: {
    ...options.https,
    key: process.env.WEBPACK_KEY,
    cert: process.env.WEBPACK_CERT,
  },
}));

const config = Encore.getWebpackConfig();

config.output.crossOriginLoading = 'anonymous';
config.resolve.fallback = {...config.resolve.fallback, fs: false};
config.parallelism = 10;

module.exports = config;

opened May 31, 2022 by hailwood 0

Open

Changing to support the "server" options object for webpack-dev-server

Follow up to #1118 and solves #1119.

The new server object has existed since webpack-dev-server 4.4 https://github.com/webpack/webpack-dev-server/pull/3940, and we already require 4.8.

Support for the old https kept for now (with deprecations) to help people migrate.

opened May 31, 2022 by weaverryan 0

Open

Allow using package path for copyFiles()

The bundle will register a path like this

"@symfony/ux-turbo": "file:vendor/symfony/ux-turbo/Resources/assets",

It would be nice to be able to use this in the copyFiles(), like so

Encore.
    .copyFiles({
        from: '@symfony/ux-turbo/css',
        to: 'css/[path][name].[hash:8].[ext]',
    });

opened May 31, 2022 by dkarlovi 2

v2.1.0(May 5, 2022)

Hey packagers!

This is a small releasing that adds the possibility to use the sass-embedded package with enableSassLoader(), which is a faster alternative to sass.

To upgrade run:

yarn upgrade "@symfony/[email protected]^2.1.0"

Changes: v2.0.0..v2.1.0

Documentation: http://symfony.com/doc/current/frontend.html

Highlights:

Feature

#1093 - Allow sass-embedded - @IonBazan

Source code(tar.gz)
Source code(zip)

v2.0.0(May 3, 2022)

Hi bundlers!

This is a new major release. In Encore itself, nothing really changed. However, we upgraded many of our dependencies across new major versions. Upgrading should be easy, unless you're integrating more deeply into any of the upgraded dependencies.

To upgrade run:

yarn upgrade "@symfony/[email protected]^2.0.0"

Changes: v1.8.2..v2.0.0

Documentation: http://symfony.com/doc/current/frontend.html

Highlights:

This is a new major version that contains several backwards-compatibility breaks.

BC Breaks

The following dependencies were upgraded a major version. It's unlikely these will cause problems, unless you were further configuring this part of Encore:

clean-webpack-plugin Version 3 to 4: dropped old Node & Webpack version support
css-loader Version 5 to 6: dropped old Node version support & CHANGELOG
css-minimizer-webpack-plugin Version 2 to 3: dropped old Node version support
loader-utils REMOVED
mini-css-extract-plugin Version 1.5 to 2.2.1: dropped old Node & Webpack version support & CHANGELOG
pretty-error Version 3.0 to 4.0: dropped old Node version support
resolve-url-loader Version 3.0 to 5.0: dropped old Node version support, requires postcss ^8.0, remove rework engine & CHANGELOG
style-loader Version 2 to 3: dropped old Node and Webpack version support & CHANGELOG
yargs-parser Version 20.2 to 21: dropped old Node version support

Additionally, Encore changed the supported versions of the following packages, which you may have installed to enable extra features:

eslint Minimum version increased from 7 to 8
eslint-webpack-plugin Minimum version increased from 2.5 to 3
fork-ts-checker-webpack-plugin Minimum version increased from 5 to 6 CHANGELOG
less-loader Minimum version increased from 7 to 10
postcss-loader Minimum version increased from 4 to 6
preact Minimum version increased from 8 to 10 CHANGELOG
sass-loader Minimum version increased from 9 to 12
stylus Minimum version increased from 0.54 to 0.56
stylus-loader Minimum version increased from 3 to 6 CHANGELOG
vue-loader Minimum version increased from 16 to 17 CHANGELOG
Removed Encore.enableEslintLoader(): use Encore.enableEslintPlugin().
If using enableEslintPlugin() with the @babel/eslint-parser parser, you may now need to create an external Babel configuration file. To see an example, temporarily delete your .eslintrc.js file and run Encore. The error will show you a Babel configuration file you can use.
With configureDefinePlugin(), the options['process.env'] key format passed to the callback has changed (see #960). If you are using configureDefinePlugin() to add more items to process.env, your code will need to change:

Encore.configureDefinePlugin((options) => {
-    options['process.env']['SOME_VAR'] = JSON.stringify('the value');
+    options['process.env.SOME_VAR'] = JSON.stringify('the value');
})

Source code(tar.gz)
Source code(zip)

v1.8.2(Mar 17, 2022)

Hey Webpackers!

This release re-adds the --public option, which can be useful for the dev-server, especially with Docker. WIP docs can be found at: https://github.com/symfony/symfony-docs/pull/16622

To upgrade run:

yarn upgrade "@symfony/[email protected]^1.8.2"

Changes: v1.8.1..v1.8.2

Documentation: http://symfony.com/doc/current/frontend.html

Highlights:

Bug Fix

#1095 - bug #1095 Revert removing public option from dev-server - @louismariegaborit

Happy packing!

Source code(tar.gz)
Source code(zip)

v1.8.1(Jan 21, 2022)

Hey Webpackers!

This release fixes 1.8.0, which incorrectly requires the eslint-webpack-plugin package in all situations.

To upgrade run:

yarn upgrade "@symfony/[email protected]^1.8.1"

Changes: v1.8.0..v1.8.1

Documentation: http://symfony.com/doc/current/frontend.html

Highlights:

Bug Fix

#1076 - fix: lazy-load ESLint plugin dependency, fix #1075 - @Kocal

Happy packing!

Source code(tar.gz)
Source code(zip)

v1.8.0(Jan 20, 2022)

Hey Webpackers!

A new release with some nice features, provided by the community!

To upgrade run:

yarn upgrade "@symfony/[email protected]^1.8.0"

Changes: v1.7.1..v1.8.0

Documentation: http://symfony.com/doc/current/frontend.html

Highlights:

Feature

#985 - Move from eslint-loader to eslint-webpack-plugin - @Kocal
#1070 - New Encore method for adding multiple entries at once - @shmolf
#1074 - Support AVIF images - @benbankes

Happy packing!

Source code(tar.gz)
Source code(zip)

v1.7.1(Jan 20, 2022)

Hey Webpackers!

A tiny release that addresses a possible dependency issue with webpack-cli that can cause aa cryptic error. No fun!

To upgrade run:

yarn upgrade "@symfony/[email protected]^1.7.1"

Changes: v1.7.0..v1.7.1

Documentation: http://symfony.com/doc/current/frontend.html

Highlights:

Bug Fix

#1069 - Increased webpack-cli version constraint to v.4.9.1 - @nspyke

Happy packing!

Source code(tar.gz)
Source code(zip)

A curated list of awesome Webpack resources, libraries and tools

:fire: Hot reload webpack bundles on the server

Run terminal commands with webpack

A chaining API to generate and simplify the modification of Webpack configurations.

Electrify is an webpack visualizer for analyzing webpack bundles.

A webpack plugin that use externals of CDN urls for production and local node_modules for development

A HTML based reporter for webpack dev server

A webpack plugin for prepack.

Synchronises Assets between Rails and S3

CLI tool to generate webpack.config.js

A Webpack plugin for Lighthouse

A tool for monitoring webpack optimization metrics through the development process

JS Codemod to automatically convert webpack config from v1 to v2

CLI tool to setup webpack and react/preact on a given directory

Dynamically add an asset to the Webpack graph

Webpack plugin to detect unused files and unused exports in used files

Use webpack loader with automatic dependency installation.

Testura.Code is a wrapper around the Roslyn API and used for generation, saving and compiling C# code. It provides methods and helpers to generate classes, methods, statements and expressions.

Put your assets into the pipe and smoke them.

A tiny 1kb JavaScript library for preloading assets on the browser via XHR2. It provides the ability to load assets of different file types and composite progress events.

Share this repo

Related Repos

Build Tools

✍️ See latest package versions in your package.json

All the npm/yarn commands I don't want to type ✨ Features Display latest package versions as virtual text Upgrade package on current line to latest ve

Build Tools

552

Unified plugin system for Vite, Rollup, and Webpack

Build Tools

Build Apps Visually - Drag and drop components, and turn designs into real application scr...

Drag and drop components, and turn designs into real application screens in minutes instead of hours. Take advantage of the various widgets and their properties to build elaborate and beautiful apps.