[WIP] Use mini-css-extract-plugin@^0.7.0 and embed webpack-manifest-plugin into Encore #564

Lyrkan · 2019-04-13T22:32:39Z

A while ago we were forced to pin mini-css-extract-plugin to <0.4.2 because >=0.4.3 is not compatible with the current version of webpack-manifest-plugin (see shellscape/webpack-manifest-plugin#167).

Since the webpack-manifest-plugin hasn't been updated for quite a long time I suggest that we go back to what we did previously: embed it directly into Encore and apply the patch from shellscape/webpack-manifest-plugin#176.

At the same time the PR will:

update mini-css-extract-plugin to ~~^0.6.0~~ ^0.7.0
enable HMR in it when needed (--hot)
add a configureMiniCssExtractPlugin(...) method that allows to configure both the loader and the plugin

In terms of BC, it could have some impacts since the plugin won't be an instance of webpack-manifest-plugin anymore. The mini-css-extract-plugin part however doesn't seem to introduce any BC break (only bug fixes and new features).

Closes #415

Lyrkan · 2019-04-14T11:04:26Z

Looks like there is an issue with the hashes in filenames, it doesn't use the same ones for my env (on which tests are all greens), Travis and AppVeyor.

I'll try to see if I can find out why...

Lyrkan · 2019-04-14T11:30:38Z

I think that's related to webpack-contrib/mini-css-extract-plugin#308

The issue was introduced by mini-css-extract-plugin@^0.4.4 and causes the hashes to change depending on the full paths of the files...

Let's put this PR on hold for now :)

Lyrkan · 2019-04-14T13:00:52Z

In the meantime I enabled HMR on the mini-css-extract-plugin by default when Encore is called with --hot and added an Encore.configureMiniCssExtractPlugin method:

Encore.configureMiniCssExtractPlugin(
  loaderOptions => {
    // change loader options here
  },
  pluginOptions => {
    // change plugin options here (optional)
  }
);

tianyong90 · 2019-06-13T05:18:30Z

👍 Really ood job. I guess HMR will work for CSS after this PR.

Lyrkan · 2019-06-13T07:05:36Z

I guess HMR will work for CSS after this PR.

@tianyong90 You should actually already be able to use HMR with CSS by disabling the part that extracts styles to files, for instance:

if (Encore.isDevServer()) {
  Encore.disableCssExtraction();
}

tianyong90 · 2019-06-13T07:15:02Z

@Lyrkan Thank you! I just start using encore yesterday (in fact I have stared it for nearly a year), I use it in my Laravel project and I think it much better than laravel-mix which I used for years. 😄

I've tried just now, but it did not work yet. I modified my css and the hot-update.js file loaded successfully, however the page style did not change.

Kocal · 2019-06-13T07:24:16Z

You should actually already be able to use HMR with CSS by disabling the part that extracts styles to files, for instance:

This need to be documented IMO

Lyrkan · 2019-06-13T12:09:22Z

I've tried just now, but it did not work yet. I modified my css and the hot-update.js file loaded successfully, however the page style did not change.

I'll have to take a look at it but last time I tried doing that it was working fine.

This need to be documented IMO

I was planning to add a boolean parameter to disableCssExtraction() (@weaverryan suggested it in another issue) before doing that:

Encore.disableCssExtraction(Encore.isDevServer());

Merging this PR would probably a best solution for HMR but I think the inconsistent hashes issue hasn't been fixed yet on mini-css-extract-plugin's side

Kocal · 2019-06-13T19:24:54Z

I was planning to add a boolean parameter to disableCssExtraction()

I'm not really a big fan. disableCssExtraction(true) means disable and disableCssExtraction(false) means don't disable? 🤔

I can understand this parameter is here to not breaking methods chaining, but I really think adding a enable/disable parameter to a method that disable something is wrong.

Instead, maybe we can do something like Encore.configureCssExtraction({ enable: !Encore.isDevServer())?

Lyrkan · 2019-06-13T20:48:34Z

I read it more like:

disableCssExtraction(true) => "do I want to disable CSS extraction? yes"
disableCssExtraction(false) => "do I want to disable CSS extraction? no"

Kind of the same way we already have enableVersioning(false) or enableSourceMaps(false) (but Encore.enableCssExtraction() wouldn't make much sense since it is already enabled by default)

Lyrkan · 2019-06-16T16:19:28Z

Rebased and changed the mini-css-extract-plugin version to ^0.7.0, but sadly the hashes issue is still a thing:

on my env:

0.90edc8e8.js
0.6ba897e2.css
bg.76e19b0d.css
entrypoints.json
h1.6ba897e2.css
main.4a5effdb.js
manifest.json
runtime.c4afe823.js

on Travis:

0.b71d4149.css
0.e7a12d6d.js
bg.e225dd24.css
entrypoints.json
h1.b71d4149.css
main.4a5effdb.js
manifest.json
runtime.982f7d96.js

on AppVeyor:

0.7f1904a2.js
0.fefbda8e.css
bg.c1fc7b6d.css
entrypoints.json
h1.fefbda8e.css
main.4a5effdb.js
manifest.json
runtime.346dea91.js

…into Encore

…trict regarding hashes

Lyrkan · 2019-07-24T21:33:15Z

Still an issue... so I added a commit that makes the failing test less strict regarding hashes: it will still check that the expected files are generated but all hashes will be accepted.

I'm not sure that's the best thing to do since having inconsistent filenames between environments can be really annoying... but that's an option if we really want to update the mini-css-extract-plugin.

weaverryan

Sorry for letting this sit. I just addressed the hash test problem.

In general, does this have anything blocking it? What's the status of the HMR? About the disableCssExtraction(true) thing (because it would indeed be confusing), one option is to use enableCssExtraction() or enableCssExtraction(false). If we did this, we should probably deprecate the automatic extraction of CSS files. What I mean is, if you don't explicitly call enableCssExtraction(), we would trigger a deprecation warning. The idea is that we would make this part of THEIR config so that it's more explicit.

But... I only want to do this if there is a good reason to disable extraction (like, HMR basically does NOT work without it). And, I'd probably rename it to extractCssToExternalFiles(). But mostly... I would just like HMR to work without the user needing to worry about this ;).

weaverryan · 2019-08-09T02:23:42Z

test/functional.js

+                        }
+
+                        return true;
+                    });


So the unstable hashes only affect this test? Is it the only one where we have versioning enabled and are checking for CSS paths? If so, I'm ok cool with this... it's not ideal... because we'd like to know if hashes are changing unnecessarily... but we need to be pragmatic and nobody can think of a better solution :).

Could we refactor this into a reusable function... more for clarity than reusability - something on webpackAssert?

Lyrkan · 2019-08-09T07:52:44Z

Hey @weaverryan,

In general, does this have anything blocking it?

Depending on who you ask the hashes could be considered a blocking thing since it prevents having reproducible builds under certains conditions. But that's the only negative thing I see right now.

What's the status of the HMR?

Last time I checked it was working out of the box when using --hot.

What I mean is, if you don't explicitly call enableCssExtraction(), we would trigger a deprecation warning. The idea is that we would make this part of THEIR config so that it's more explicit.

I'm not sure adding mandatory methods is a good idea... especially since you could be using Encore to only handle JS files, in which case it wouldn't make sense to be forced to setup a CSS-related thing.

But... I only want to do this if there is a good reason to disable extraction (like, HMR basically does NOT work without it).

That shouldn't be needed for HMR if this PR is merged, and if someone really has to do it for another reason that's still doable using Encore.disableCssExtraction()... just not in a fluent way.

Lyrkan · 2019-10-05T00:58:54Z

Closing this PR in favor of #645 since it doesn't seem to have the annoying inconsistent hashes issue.

We could always reopen it if the other one doesn't get into a mergeable state fast enough.

@mastilver

This PR was squashed before being merged into the main branch. Discussion ---------- 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: shellscape/webpack-manifest-plugin#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 `webpack-manifest-plugin@^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 webpack/webpack#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: vuejs/vue-loader#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 `webpack-cli@3`** which may not support Webpack 5. It currently seems to be OK but we should probably upgrade to `webpack-cli@4` (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). Commits ------- 57f64fa Remove unusued files/constants related to versioning/shared entry 8d7843a Add removed Babel test back 216a5ca Update css-loader and style-loader ddcd6d8 Merge branch 'main' into webpack5 444c37f Merge branch 'main' into webpack5 b292e76 Fix linting issues d576b21 Remove deprecation caused by the DeletedUnusuedEntriesJSPlugin b0f7190 Update some hashes in functional tests 4f6171b Update WebpackManifestPlugin to v3.0.0 and vue-loader to v16.1.0 9af90ee Remove wrong comment 50cea18 Bump min. Typescript version to 3.6.3 1d22520 Don't set hmr option for mini-css-extract-plugin (deprecated since 1.0.0) 564b147 Update Vue.js dependencies 8da531e Replace optimize-css-assets-webpack-plugin by css-minimizer-webpack-plugin f3843ca Update Webpack to 5.0.0

Lyrkan changed the title ~~Use mini-css-extract-plugin@^0.6.0 and embed webpack-manifest-plugin into Encore~~ [WIP] Use mini-css-extract-plugin@^0.6.0 and embed webpack-manifest-plugin into Encore Apr 14, 2019

Lyrkan force-pushed the webpack-manifest-mini-css-extract-issue branch from 92017f7 to 9fe1632 Compare April 14, 2019 12:47

Lyrkan force-pushed the webpack-manifest-mini-css-extract-issue branch 2 times, most recently from 835b2ed to 2e1122e Compare June 16, 2019 16:14

Lyrkan changed the title ~~[WIP] Use mini-css-extract-plugin@^0.6.0 and embed webpack-manifest-plugin into Encore~~ [WIP] Use mini-css-extract-plugin@^0.7.0 and embed webpack-manifest-plugin into Encore Jun 16, 2019

Lyrkan mentioned this pull request Jun 17, 2019

Rebuild assets symfony/demo#994

Merged

Use mini-css-extract-plugin@^0.7.0 and embed webpack-manifest-plugin …

d3adb3a

…into Encore

Lyrkan force-pushed the webpack-manifest-mini-css-extract-issue branch from 2e1122e to d3adb3a Compare July 24, 2019 20:44

Make the "enableVersioning applies to js, css & manifest" test less s…

0ae3eff

…trict regarding hashes

Lyrkan force-pushed the webpack-manifest-mini-css-extract-issue branch from 099046e to 0ae3eff Compare July 24, 2019 21:27

weaverryan reviewed Aug 9, 2019

View reviewed changes

Lyrkan mentioned this pull request Sep 17, 2019

can not reload css when scss changed in dev server hot #348

Open

Lyrkan mentioned this pull request Oct 5, 2019

Update Webpack to v5 (+ other dependencies) #645

Merged

Lyrkan closed this Oct 5, 2019

ghost mentioned this pull request Feb 21, 2020

How to configure mini-css-extract-plugin #701

Open

Lyrkan mentioned this pull request Apr 29, 2020

mini-css-extract-plugin is totally outdated #742

Closed

Lyrkan mentioned this pull request May 9, 2020

Add a boolean parameter to Encore.disableCssExtraction() #756

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP] Use mini-css-extract-plugin@^0.7.0 and embed webpack-manifest-plugin into Encore #564

[WIP] Use mini-css-extract-plugin@^0.7.0 and embed webpack-manifest-plugin into Encore #564

Lyrkan commented Apr 13, 2019 •

edited

Loading

Lyrkan commented Apr 14, 2019

Lyrkan commented Apr 14, 2019

Lyrkan commented Apr 14, 2019

tianyong90 commented Jun 13, 2019

Lyrkan commented Jun 13, 2019

tianyong90 commented Jun 13, 2019 •

edited

Loading

Kocal commented Jun 13, 2019

Lyrkan commented Jun 13, 2019

Kocal commented Jun 13, 2019

Lyrkan commented Jun 13, 2019

Lyrkan commented Jun 16, 2019 •

edited

Loading

Lyrkan commented Jul 24, 2019

weaverryan left a comment

weaverryan Aug 9, 2019

Lyrkan commented Aug 9, 2019

Lyrkan commented Oct 5, 2019 •

edited

Loading

[WIP] Use mini-css-extract-plugin@^0.7.0 and embed webpack-manifest-plugin into Encore #564

[WIP] Use mini-css-extract-plugin@^0.7.0 and embed webpack-manifest-plugin into Encore #564

Conversation

Lyrkan commented Apr 13, 2019 • edited Loading

Lyrkan commented Apr 14, 2019

Lyrkan commented Apr 14, 2019

Lyrkan commented Apr 14, 2019

tianyong90 commented Jun 13, 2019

Lyrkan commented Jun 13, 2019

tianyong90 commented Jun 13, 2019 • edited Loading

Kocal commented Jun 13, 2019

Lyrkan commented Jun 13, 2019

Kocal commented Jun 13, 2019

Lyrkan commented Jun 13, 2019

Lyrkan commented Jun 16, 2019 • edited Loading

Lyrkan commented Jul 24, 2019

weaverryan left a comment

Choose a reason for hiding this comment

weaverryan Aug 9, 2019

Choose a reason for hiding this comment

Lyrkan commented Aug 9, 2019

Lyrkan commented Oct 5, 2019 • edited Loading

Lyrkan commented Apr 13, 2019 •

edited

Loading

tianyong90 commented Jun 13, 2019 •

edited

Loading

Lyrkan commented Jun 16, 2019 •

edited

Loading

Lyrkan commented Oct 5, 2019 •

edited

Loading