Webpack 4 and so much more 🎇! This is a huge release that contains some backwards-compatibility breaks or changes.
To upgrade, change your version constraint to ^0.21.0
and run yarn upgrade
.
You may also need to make a few other changes if you're a Symfony user:
composer require symfony/webpack-encore-bundle
- Replace your manual script and link tags with the new
encore_entry_script_tags()
andencore_entry_link_tags()
functions from that bundle.
Highlights
-
[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. -
[DEPRECATION] You must now call either
Encore.enableSingleRuntimeChunk()
orEncore.disableSingleRuntimeChunk()
: not calling either method is
deprecated. The recommended setting isEncore.enableSingleRuntimeChunk()
.
This will cause a newruntime.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 aboveenableSingleRuntimeChunk()
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 newbrowserslist
key to yourpackage.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 theoptimizations.splitChunks
configuration. -
A new
entrypoints.json
file is now always output. For expert
use-cases, theoptimizations.splitChunks.chunks
configuration
can be set viaconfigureSplitChunks()
toall
. Then, you
can write some custom server-side code to parse theentrypoints.js
so that you know whichscript
andlink
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 callingenableHandlebarsLoader()
.
#301 thanks to @ogiammetta -
Support was added for
eslint-loader
by callingenableEslintLoader()
.
#243 thanks to @pinoniq -
The
css-loader
can now be configured by callingconfigureCssLoader()
.
#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 toconfigureBabel()
- #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 frombabel-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 usingconfigureUglifyJsPlugin()
, please switch to
configureTerserPlugin()
instead.