@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.

Changelog

0.21.0

• [BC BREAK] Webpack was upgraded to version 4. This includes a number of major and minor changes. The changes are listed below under the Webpack 4 Upgrade section.

• [BC BREAK] The createSharedEntry() no longer can be passed an array of files. Instead, set this to just one file, and require the other files from inside that file.

• [DEPRECATION] You must now call either Encore.enableSingleRuntimeChunk() or Encore.disableSingleRuntimeChunk(): not calling either method is deprecated. The recommended setting is Encore.enableSingleRuntimeChunk(). This will cause a new runtime.js file to be created, which must be included on your page with a script tag (before any other script tags for Encore JavaScript files). See the documentation above enableSingleRuntimeChunk() in index.js for more details.

• [BEHAVIOR CHANGE] Previously, without any config, Babel was configured to "transpile" (i.e. re-write) your JavaScript so that it was compatible with all browsers that currently have more than 1% of the market share. The new default behavior is a bit more aggressive, and may rewrite even more code to be compatible with even older browsers. The recommendation is to add a new browserslist key to your package.json file that specifies exactly what browsers you need to support. For example, to get the old configuration, add the following to package.json:

{
    "browserslist": "> 1%"
}

See the browserslist library for a full description of all of the valid browser descriptions.

• Added a new copyFiles() method that is able to copy static files into your build directory and allows them to be versioned. #409 thanks to @Lyrkan

• Introduced a new configureSplitChunks() method that can be used to further configure the optimizations.splitChunks configuration.

• A new entrypoints.json file is now always output. For expert use-cases, the optimizations.splitChunks.chunks configuration can be set via configureSplitChunks() to all. Then, you can write some custom server-side code to parse the entrypoints.js so that you know which script and link tags are needed for each entry.

• The "dynamic import" syntax is now supported out of the box because the @babel/plugin-syntax-dynamic-import babel plugin is always enabled. This allows you to do "Dynamic Imports" as described here: https://webpack.js.org/guides/code-splitting/#dynamic-imports

• A new "version check" system was added for optional dependencies. Now, when you install optional plugins to support a feature, if you are using an unsupported version, you will see a warning. "Package recommendation" errors (i.e. when you enable a feature but you are missing some packages) will also contain the version in the install string when necessary (e.g. yarn add foo@^2.0).

• Support was added handlebars-loader by calling enableHandlebarsLoader(). #301 thanks to @ogiammetta

• Support was added for eslint-loader by calling enableEslintLoader(). #243 thanks to @pinoniq

• The css-loader can now be configured by calling configureCssLoader(). #335 thanks to @XWB

• It's now possible to control the exclude for Babel so that you can process certain node_modules packages through Babel - use the new second argument to configureBabel() - #401 thanks to @Lyrkan.

Webpack 4 Upgrade Details

• Node 7 is no longer supported. This is because the new mini-css-extract-plugin does not support it (and neither) does Yarn.

• For Preact, the necessary plugin the user needs to install changed from babel-plugin-transform-react-jsx to @babel/plugin-transform-react-jsx.

• The NamedModulesPlugin was removed.

• The babel-preset-env package (which was at version ^1.2.2) was removed in favor of @babel/preset-env.

• ExtractTextPlugin was removed and replaced with mini-css-extract-plugin. Accordingly, extractTextPluginOptionsCallback() was removed.

• Support for CoffeeScript was entirely removed.

• Actual lang="sass" no longer works for Vue. However, lang="scss" continues to work fine.

• uglifyjs-webpack-plugin was replaced by terser-webpack-plugin. If you're using configureUglifyJsPlugin(), please switch to configureTerserPlugin() instead.