Hello Webpack4 ⭐️ #324

weaverryan · 2018-05-16T20:04:06Z

Hi guys!

I've delayed long enough. Let's upgrade to Webpack 4. As discussed on #250, we will not support old versions of Webpack - the versions are too different, and most people won't notice/care anyways.

And actually, other than the first todo, this is almost finished. AND, if you ignore yarn.lock, this PR makes Encore smaller :).

TODOS:

 ERROR  Failed to compile with 1 errors                                         8:32:32 PM

 error  in ./css/another_bg_image.css

Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './../images/symfony_logo.png2' in '/Users/weaverryan/Sites/os/webpack-encore/tmp_project_playing/css'
(stacktrace)

A) I thought we cleaned up the stacktrace
B) the ModuleNotFound is listed several times
C) The path just ends in /css, not the filename, which is not that helpful.
D) The actual error is hidden in the ugly stack trace, not on top.

Create a solution to use the entrypoints.json file & deprecate createdSharedEntry()

Documentation

Document use of browserslist + update Encore recipe

Later

(Later, in another PR) change from webpack-dev-server to webpack-serve

stof · 2018-05-17T07:42:26Z

lib/config-generator.js

@@ -314,6 +306,24 @@ class ConfigGenerator {
            .map((plugin) => plugin.plugin);
    }

+    buildOptimizationConfig() {
+        const optimization = {
+


this needs to have runtimeChunk: 'single' to extract the runtime (and the list of BC breaks should mention the renaming from manifest.js to runtime.js)

weaverryan · 2018-05-17T20:07:33Z

Just re-added the traditional createSharedEntry() functionality. As you hinted Stof, it was fairly straightforward - see sha: 183b146

About the default groups - vendor and default. First, I'm not sure if I've overwritten them, or if they still exist. Either way, they don't appear to be a problem, because they are only async. I need to look further, however, because I don't actually want to override them - they should still be available for async chunks.

stof · 2018-05-18T13:11:17Z

yeah, as you enable splitting of the initial chunks only for your own cache group and not globally for all of them (as I was doing in my example in #250), they are totally fine (splitting the async chunks as much as webpack wants is totally fine)

bgaleotti · 2018-05-29T10:29:48Z

lib/WebpackConfig.js

@@ -308,6 +309,14 @@ class WebpackConfig {
        this.babelConfigurationCallback = callback;
    }

+    configureSplitChunks(callback) {
+        if (typeof callback !== 'function') {
+            throw new Error('Argument 1 to configureBabel() must be a callback function.');


throw new Error('Argument 1 to configureSplitChunks() must be a callback function.');

weaverryan · 2018-06-11T02:48:35Z

Ok! This is ready for review!

The file diff is huge, so I fear it's near impossible to review fully. However, the CHANGELOG has the highlights, including the BC breaks.

Anyone reading this, if you could try the webpack4 branch of this repo in your project, and report any issues, that would be a huge help :). You can do that by updating your package.json to have:

"@symfony/webpack-encore": "git://github.com/symfony/webpack-encore.git#webpack4"

And running yarn upgrade.

Fun fact: if you compare the functional tests of this branch to the master branch, they're noticeably faster (thanks to Webpack 4 being faster) :)

raupie · 2018-06-12T19:23:06Z

I was having issues with running 'production' for a foundation-sites 6 install with the latest stable version of webpack-encore. I added this branch and now it's passing successfully! This just made my day, seriously. Win! Love webpack-encore!

weaverryan · 2018-06-12T21:24:53Z

@raupie Woohoo! Thanks for testing this!

I have discovered one issue. If you use createdSharedEntry(), it appears that the code in your shared entry may not be executed :/. Checking into it...

stof · 2018-06-13T09:53:19Z

@weaverryan how does the entrypoints.json file works regarding versionning ? does it contain versionned names, or non-versionned ones (to lookup in the manifest.json file) ?

stof · 2018-06-13T10:59:20Z

CHANGELOG.md

+ * Introduced a new `configureSplitChunks()` method that can be
+   used to further configure the `optimizations.splitChunks` configuration.
+
+ * A new `entrypoints.js` file is now always output. For expert


is it a .js or a .json file ? I don't think it should be a JS file if the backend code should deal with it (I don't want to need to use a node-subprocess to read the JS file to allow for JS features)

the code is already using json so this is only a doc mistake

stof · 2018-06-13T11:01:56Z

lib/config-generator.js

+
+            splitChunks.cacheGroups = cacheGroups;
+            // causes a runtime.js to be emitted with the Webpack runtime
+            optimization.runtimeChunk = 'single';


shouldn't this be done by checking whether optimization.splitChunks is a non-empty object instead ? Now that you added support for a callback, the case of using sharedCommonsEntryName is not the only case triggering splitting.

stof · 2018-06-13T11:04:45Z

test/functional.js

+                        'h1.8ec31654.css',
+                        'bg.0ec2735b.css',
+                        'manifest.json',
+                        'entrypoints.json'


I suggest asserting the content of entrypoints.json too in this test using versionning

stof · 2018-06-13T11:05:56Z

test/functional.js

+            testSetup.runWebpack(config, (webpackAssert) => {
+                webpackAssert.assertOutputJsonFileMatches('entrypoints.json', {
+                    main: {
+                        js: ['vendors~main~other.js', 'main~other.js', 'main.js'],


should we have the runtime file in this list too ?

stof · 2018-06-13T11:09:15Z

lib/plugins/plugin-priorities.js

    DeleteUnusedEntriesJSPlugin: 0,
+    EntryFilesManifestPlugin: 0,


should have a low priority, to be sure it runs after other plugins (btw, we should really change these priorities. Having them all at 0 makes the priority system a simple prepend/append one, which could then be simplified a lot)

stof · 2018-06-13T11:17:37Z

lib/features.js

+        packages: [
+            { name: 'typescript' },
+            { name: 'ts-loader', version: 4 },
+            { name: 'fork-ts-checker-webpack-plugin', version: 0 },


this will ask to install fork-ts-checker-webpack-plugin@^0.0, which won't work.

You should not handle version as a number IMO, but as a semver version constraint instead IMO (use the semver package to check that then).

stof · 2018-06-13T11:24:55Z

lib/plugins/entry-files-manifest.js

+        plugin: new EntryFilesManifestPlugin(
+            path.join(webpackConfig.outputPath, 'entrypoints.json')
+        ),
+        priority: PluginPriorities.DeleteUnusedEntriesJSPlugin


wrong priority constant (OK, they're all using the same value, so it is hard to notice it)

Lyrkan · 2018-06-16T13:04:47Z

index.js

-     * @param {function} extractTextPluginOptionsCallback
-     * @returns {Encore}
-     */
-    configureExtractTextPlugin(extractTextPluginOptionsCallback = () => {}) {


Maybe we could also do something in the EncoreProxy at the bottom of that file to detect when a user tries to call configureExtractTextPlugin or enableCoffeeScriptLoader and display some kind of "This method is not available anymore in Webpack Encore" error message instead of the default one?

Lyrkan · 2018-06-16T13:30:11Z

lib/config-generator.js

@@ -115,7 +118,7 @@ class ConfigGenerator {
    }

    buildOutputConfig() {
-        // Default filename can be overriden using Encore.configureFilenames({ js: '...' })
+        // Default filename can be overridden using Encore.configureFilenames({ js: '...' })


There is the same typo twice below (my bad!)

weaverryan · 2018-06-26T01:15:09Z

@stof

@weaverryan how does the entrypoints.json file works regarding versionning ? does it contain versionned names, or non-versionned ones (to lookup in the manifest.json file) ?

Actually, this is tricky. I believe it is currently the versioned file. But, I think that's a mistake: it should be the unversioned filename because we need to be able to loop up the value manifest.json (e.g. in case a CDN is used). In fact, I think the filenames in main.js need to be the same as the "keys" in manifest.json.

// entrypoints.json

{
    "main": {
        "js": ["build/runtime.js", "build/shared.js", "build/main.js"],
        "css": ["build/shared.css"]
    }
}

// manifest.json

{
    "build/runtime.js": "https://somecdn.com/build/runtime.abc123.js",
    "...": "..."
}

This would allow some future code like this in a template:

{% for jsFile in getEntrypointJavaScriptFiles('main') %}
        <script src="{{ asset(jsFile) }}"></script>
{% endfor %}

But I'm not sure yet if this entirely makes sense. Another option would create a simpler map:

// entrypoints.json

{
    "main": {
        "js": ["runtime.js", "shared.js", "main.js"],
        "css": ["shared.css"]
    }
}

Then, do a bit more work in the template:

{% for jsFile in getEntrypointJavaScriptFiles('main') %}
        <script src="{{ asset('build/'~jsFile) }}"></script>
{% endfor %}

(or some shortcut version)

{{ webpackEntryScriptTags('main', 'build/') }}

(or even put the build/ prefix in the config of that future bundle.

Thinking out loud - not sure about this exact detail yet.

raupie · 2018-07-12T18:25:47Z

any update?

weaverryan · 2018-07-12T22:54:26Z

Was just working on it today :). All major parts are done - just finishing touches. I’ll have it soon!

mini-css-extract

We need to re-add commons chunk still, but in a different way

Previously, the CSS was included inline in the JS file, and added via the style loader. This should be invisible to the user.

In theory, they should not have. But, we upgraded so many libraries, this is not very surprising. It should be invisible to the user anyways.

mode

Lyrkan · 2018-07-17T12:10:33Z

lib/config-generator.js

+            splitChunks.name = function(module, chunks, cacheGroup) {
+                const names = chunks.map(c => c.name);
+
+                return cacheGroup + '~' + hashFilename(names.join('~'));


I'm not sure ~ is a good separator choice, it's part of the "unsafe characters" listed in this RFC: http://www.ietf.org/rfc/rfc1738.txt

that's the separator used by default in Webpack 4

Kinda weird they went with that one, but let's keep it that way then

entrypoints.json

This is a subjective decision we made, because we thought it would cause less "confusing" moments (i.e. when 2 different entries would not share the same modules). Unfortunately, the single runtime chunk causes a strange bug with mini-css-extract plugin where, under some conditions, the output CSS uses the chunk filename instead of "filename".

This removes the BC breaks related to runtime.js, in favor of a deprecation layer instead.

entrypoints.json

This will make it SUPER easy to find the final paths: 1) Look up all the CSS or JS files for entry "foo_bar" 2) The values you get back can immediately be used to lookup the final path in manifest.json

weaverryan · 2018-07-18T19:31:18Z

Woohoo!

I've just merged this! But, I'm not ready to create a tag: I need to make a PR for the documentation and discuss the plan for the WebpackEncoreBundle. But, it should now be a bit easier to test Webpack4 - just use the master branch - update your package.json file:

"@symfony/webpack-encore": "git://github.com/symfony/webpack-encore.git#master"

arendjantetteroo · 2018-07-19T12:40:39Z

Nice work!

I've tried updating and got 2 errors

style-loader was missing, not sure if this was a previous requirement? (run yarn add style-loader fixed it)
An error about a plugin/preset doing some things not allowed:

$ yarn run encore dev --watch
yarn run v1.7.0
warning package.json: No license field
$ /node_modules/.bin/encore dev --watch
/node_modules/@babel/core/lib/config/config-descriptors.js:138
throw new Error(Plugin/Preset files are not allowed to export objects, only functions. In ${filepath});
^

Error: Plugin/Preset files are not allowed to export objects, only functions. In /node_modules/babel-preset-react/lib/index.js

We use enableReactPreset.
Am i missing a change to make?

stof · 2018-07-19T12:44:04Z

maybe you need to update the preset to a newer version

arendjantetteroo · 2018-07-19T13:10:56Z

Thanks, that was indeed it.

raupie · 2018-07-19T13:45:01Z

I'm getting this error: SyntaxError: unexpected token: ':' which points to line one below.

/***/ "../../../tmp/tmp-92SW7NIosJEwEF.tmp":
/*!***********************************!*\
  !*** /tmp/tmp-92SW7NIosJEwEF.tmp ***!
  \***********************************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {

weaverryan · 2018-07-23T15:30:52Z

@arendjantetteroo What version of react-preset were you using before? And did you see any warning that you needed to upgrade? After this PR, if you're using an optional library that is outside of our supported version constraints, you should see a warning. I'm worried there may be some issue with that - would love some more info from you on #359. Thanks!

style-loader was missing, not sure if this was a previous requirement? (run yarn add style-loader fixed it)

This is mysterious, because it IS a under dependencies, so it should have been installed automatically. Basically, this should work without needing to add it. @arendjantetteroo if you yarn remove style-loader do things still work?

~~@raupie Can you post your setup on #360? You are using createSharedEntry(), right? It indeed looks like a possible bug - but I'll need help reproducing.~~ This is now fixed

arendjantetteroo · 2018-08-14T08:07:14Z

@weaverryan Sorry, holiday came in between.

We had "babel-preset-react": "^6.24.1", in yarn.
No style-loader in package.json

Upgraded to "@babel/preset-react": "^7.0.0-beta.54" fixed the error (but caused a lot of other dependency to be needed to upgrade as well)

Removing the style-loader it now seems to work fine, might have been an issue with all the dependency updates or leftover webpack config.

Rebolon · 2018-10-10T12:23:00Z

Hi,
any documentation on how to use this great feature ?
what is the standard configuration to use ?
Thx

weaverryan mentioned this pull request May 16, 2018

Upgrade to Webpack 4 #250

Closed

stof reviewed May 17, 2018

View reviewed changes

stof mentioned this pull request May 18, 2018

compatibility with vue-loader@^15.0 #326

Closed

Lyrkan mentioned this pull request May 20, 2018

enableVueLoader does not include VueLoaderPlugin? #311

Closed

weaverryan force-pushed the webpack4 branch from 25d9691 to 128ec00 Compare May 24, 2018 02:53

bgaleotti reviewed May 29, 2018

View reviewed changes

stof mentioned this pull request Jun 5, 2018

extract-text-plugin still not working #332

Closed

stof reviewed Jun 13, 2018

View reviewed changes

Lyrkan reviewed Jun 16, 2018

View reviewed changes

weaverryan mentioned this pull request Jun 22, 2018

A hacky attempt at supporting createSharedEntry() in Webpack 4 #339

Merged

Lyrkan mentioned this pull request Jul 2, 2018

TypeError: Cannot set property 'tsLoaderFileVersion' of undefined #340

Closed

weaverryan added 9 commits July 14, 2018 13:14

Upgrading packages to Webpack 4 and replacing extract text by

022362f

mini-css-extract

Adding mode option

89499fd

Removing CommonsChunkPlugin & moving named modules logic

43b6e30

We need to re-add commons chunk still, but in a different way

upgrading all other dependencies & handling babel env changes

9601780

Fixing deprecated hooks

a1873fc

Updating test: mini-css-extract extracts async chunks for css

02dce21

Previously, the CSS was included inline in the JS file, and added via the style loader. This should be invisible to the user.

[Minor] Hashes changed in the test

07add8f

In theory, they should not have. But, we upgraded so many libraries, this is not very surprising. It should be invisible to the user anyways.

[Minor] More test updates for now CSS async are now extracted

f9134b2

Moving Uglify configuration

dfb3611

Fixing a bug where entrypoints.json contained bad names in production

55631cc

mode

Lyrkan reviewed Jul 17, 2018

View reviewed changes

weaverryan added 10 commits July 17, 2018 10:47

Marking methods as deprecated to help auto-completion

9d2043c

Fixing a bug where runtime.js would appear for "style" entries in

f9a0799

entrypoints.json

preventing shared entry & split chunks from being used together

6de05cf

fixing comment

20ad1bd

Adding new Encore.enableSingleRuntimeChunk() + BC layer

7db0fcb

This removes the BC breaks related to runtime.js, in favor of a deprecation layer instead.

Fixing a bug where logs could break JSON output

75ea6ea

Adding missing config in test

4b43766

Fixing a bug where async-split chunks caused undefined in

df2a58f

entrypoints.json

using latest webpack-cli + updating deps

3c1b790

This was referenced Jul 18, 2018

How can we test our js components ? #256

Closed

style in Vue Js single component are ignored #350

Closed

Changing entrypoints.json values to include the manifest key prefix

ab109cd

This will make it SUPER easy to find the final paths: 1) Look up all the CSS or JS files for entry "foo_bar" 2) The values you get back can immediately be used to lookup the final path in manifest.json

weaverryan force-pushed the webpack4 branch from 59a07a3 to ab109cd Compare July 18, 2018 18:26

weaverryan merged commit c247131 into master Jul 18, 2018

weaverryan deleted the webpack4 branch July 18, 2018 19:30

This was referenced Jul 23, 2018

Make sure correct React preset version is being required #359

Closed

Possible problem with Webpack 4 shared entry creation: syntax error #360

Closed

royklutman mentioned this pull request Aug 14, 2018

When will webpack-encore with webpack 4 be published in npm? #369

Closed

wujekbogdan mentioned this pull request Feb 9, 2019

babel-loader cache is not invalidated when browserslist's config changes #514

Closed

Uh oh!

Hello Webpack4 ⭐️ #324

Hello Webpack4 ⭐️ #324

Uh oh!

Conversation

weaverryan commented May 16, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Documentation

Later

Uh oh!

Choose a reason for hiding this comment

Uh oh!

weaverryan commented May 17, 2018

Uh oh!

stof commented May 18, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

weaverryan commented Jun 11, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

raupie commented Jun 12, 2018

Uh oh!

weaverryan commented Jun 12, 2018

Uh oh!

stof commented Jun 13, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

weaverryan commented Jun 26, 2018

Uh oh!

raupie commented Jul 12, 2018

Uh oh!

weaverryan commented Jul 12, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

weaverryan commented Jul 18, 2018

Uh oh!

arendjantetteroo commented Jul 19, 2018

Uh oh!

stof commented Jul 19, 2018

Uh oh!

arendjantetteroo commented Jul 19, 2018

Uh oh!

raupie commented Jul 19, 2018

Uh oh!

weaverryan commented Jul 23, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

arendjantetteroo commented Aug 14, 2018

Uh oh!

Rebolon commented Oct 10, 2018

Uh oh!

Uh oh!

weaverryan commented May 16, 2018 •

edited

Loading

weaverryan commented Jun 11, 2018 •

edited

Loading

weaverryan commented Jul 23, 2018 •

edited

Loading