Switch to Webpack 2 #737

MoOx · 2016-09-08T23:03:49Z

~~We are blocked by mzgoddard/hard-source-webpack-plugin#27 (hmr + cache are not friends for now).~~

~~Otherwise~~ all green!

… upgrading to webpack 2

You now must use webpack 2. Don’t worry if it’s still tagged beta, it won’t it already usable for months and will be tagged as stable really soon. This will mainly improve performance & size of the bundle (which increased in recent version) thank to the [tree shaking feature ](http://blog.sethladd.com/2013/01/minification-is-not-enough-you-need.h tml). You might need to update some babel packages to latest version (especially babel-preset-es2015, to get the `modules` option). You will need to: - add new sections in your ``babel.env`` configuration. webpack 2 understand natively ``import``statements so it’s unnecessary to transform those (and it will allow webpack 2 enable tree shaking): ``webpack-develompment`` & ``webpack-production``. Check out this commit for detail (or take a look to the up to date boilerplate). - disable ``webpack.optimize.DedupePlugin`` as it’s not working yet in webpack 2 - update ``ExtractTextPlugin`` usage Closes #421

Ensure it’s optional.

Ref #421

…or babel-plugin-istanbul

…ader v3 Unblock #46

Ref #46

thangngoc89 · 2016-09-09T02:20:59Z

themes/phenomic-theme-base/scripts/phenomic.browser.js

@@ -1,26 +1,32 @@
+// Hot loading HRM Patch
+import "react-hot-loader/patch"


Can UglifyJS remove this in production mode? Why don't you add this to devEntries in dev-server. We shouldn't require any changes in the boilerplate from user.

Currently, user need to explicitely use module.hot.accept (see below), so just moving this call is useless. Also if people have issue with RHL@3, they can replace it (or remove it). I will make some tests later to provides better default, but this will bring this kind of module as a dep (and we will need to use an option to enable/disable this kind of stuff).

And don't worry, the patch already have a dev/prod hook itself ;)

Previously, the call was still explicit in babel conf (in the webpack config)

Ok. Got it.

thangngoc89 · 2016-09-09T05:17:07Z

Hard source webpack plugin has a fix for us

MoOx · 2016-09-09T05:20:33Z

@thangngoc89 I just installed 0.0.35 but it does not fix things for us :(

thangngoc89 · 2016-09-09T05:23:14Z

Ouch.

MoOx · 2016-09-09T05:24:50Z

Wait a sec. It works with cache on (first pass, without no cache yet), but does not work for the 2nd build (when cache is used).

thangngoc89 · 2016-09-09T05:30:19Z

Could you report this back to HardSource?

MoOx · 2016-09-09T05:31:51Z

Done in the PR.

MoOx · 2016-09-09T06:06:21Z

Also it seems that webpack 2 does not magically avoid having unwanted stuff like everything related to the rendering engine (lowlight, highlight, lodash etc) which sucks. Will have to investigate.

thangngoc89 · 2016-09-09T06:12:57Z

Also it seems that webpack 2 does not magically avoid having unwanted stuff like everything related to the rendering engine (lowlight, highlight, lodash etc) which sucks. Will have to investigate.

It's because you're using transpiled code when importing phenomic.

You could try adding js:next field to package.json like this https://github.com/reactjs/react-router/blob/28f693a1d7700a9efbba4f6c009ec5144d91fb5d/package.json#L13

MoOx · 2016-09-09T07:08:23Z

You are right. Then I will have to separate "phenomic" package before handling #598.

Check back when this is merge MoOx/phenomic#737

…ing deprecated in 0.16

…phenomic" To avoid shipping unnecessary code into the client bundle (regression from 0.16.0), we removed plugins & presets from “phenomic” import. Please directly use ``require(“phenomic/lib/loader-*``, by replacing camelCase by dashedCase. - ``phenomicLoaderPlugins.initBodyPropertyFromContent`` -> ``require("./phenomic-loader-plugin-init-body-property-from-content").de fault``, - ``phenomicLoaderPlugins.initHeadPropertyFromConfig`` -> ``require("./phenomic-loader-plugin-init-head-property-from-config").def ault``, - ``phenomicLoaderPlugins.initHeadPropertyFromContent`` -> ``require("./phenomic-loader-plugin-init-head-property-from-content").de fault``, - ``phenomicLoaderPlugins.initRawPropertyFromContent`` -> ``require("./phenomic-loader-plugin-init-raw-property-from-content").def ault``, - ``phenomicLoaderPlugins.initRawBodyPropertyFromContent`` -> ``require("./phenomic-loader-plugin-init-rawBody-property-from-content") .default``, - ``phenomicLoaderPlugins.markdownInitHeadDescriptionPropertyFromContent`` -> ``require("./phenomic-loader-plugin-markdown-init-head.description-prope rty-from-content").default``, - ``phenomicLoaderPlugins.markdownTransformBodyPropertyToHtml`` -> ``require("./phenomic-loader-plugin-markdown-transform-body-property-to- html").default``, - ``phenomicLoaderPresets.default`` -> ``require("./phenomic-loader-preset-default").default``, - ``phenomicLoaderPresets.markdown`` -> ``require("./phenomic-loader-preset-markdown").default``,

MoOx · 2016-09-10T22:07:18Z

"phenomic" import now do not have loader plugins & presets anymore
hmr seems to work

MoOx · 2016-09-10T22:19:21Z

Problem: Hot loading seems slower with webpack 2 + cache.
And also break our collection runtime "cache"... :'(

HMR + no cache

HMR + new cache

HMR + cache

1.1s the first time, but no collection is generated :@
This break our project since it seems that this file is cached https://github.com/MoOx/phenomic/blob/08bd04feb2254891caf809e383fca0f6608670c1/src/loader/cache.js and it should not because we use this as a "runtime" cache...

Poke @mzgoddard if you have an idea about this performance issue & this cache issue...

mzgoddard · 2016-09-11T01:02:20Z

@MoOx I have a pretty good guess what is adding time after HardSource invalidates the cache. After the first build after that message from HardSource, if you restarted your server the build times will go down. Basically HardSource is serializing all of your modules every time after that first build, as opposed to just the ones that changed, because it doesn't know they're already serialized. I'm gonna make HardSource just a little smarter and that should keep it from re-serializing everything.

MoOx · 2016-09-11T07:26:26Z

@mzgoddard the thing is, during the start (with existing cache), a file is aggressively cached https://github.com/MoOx/phenomic/blob/08bd04feb2254891caf809e383fca0f6608670c1/src/loader/cache.js and our loader have no effect on it (it's currently adding all pages data into this object, but in practise, nothing is added, so the website have no page data :'(.

Any idea how we can fix this issue?

MoOx · 2016-09-11T15:17:22Z

Perf seems fixed with latest version of hard-source-webpack-plugin@0.0.37, but our runtime cache :/ Not sure how we can handle that... Or maybe it has something to do with require.context() caching... Will try to find where the issue comes from tonight.

mzgoddard · 2016-09-11T18:46:59Z

@MoOx I think you need to move the cache and feed creation into a plugin. You want part of how ExtractTextWebpackPlugin works. The stuff you are storing on cache should be stored on the module in the meta attribute that HardSource serializes. Then with that stored in meta, whether its the first run with HardSource or a different run from a preexisting cache your plugin can build your feeds during a compilation step like additional-assets. This should also remove what looks like race conditions to me with debouncing the feed work. (Is there an existing plugin that handles feed assets being in multiple built modules if the timeout debouncer runs with more upcoming modules that will run it a second time, or between multiple builds where a different module will have the feeds built the second time?)

So the first part of this is storing the info for your feeds like ExtractText:

var fs = require('fs');

// Use the path of the plugin/loader directory to avoid conflicts on the loaderContext.
var NS = fs.realpathSync(__dirname);

module.exports = function PhenomicLoaderPlugin(options) {
  this.options = options;
};

PhenomicLoaderPlugin.prototype.apply = function(compiler) {
  var options = this.options;

  compiler.plugin('compilation', function(compilation, params) {
    compilation.plugin('normal-module-loader', function(loaderContext, module) {
      loaderContext[NS] = function(loaderResult) {
        module.meta[NS] = loaderResult;
      };
    });

    compilation.plugin('additional-assets', function(callback) {
      // Collect results
      var results = compilation.modules.map(function(module) {
        return module.meta[NS];
      });

      // Build feeds
      Object.keys(options.feeds).forEach(function(name) {
        compilation.assets[name] = feed({
          // ...
        });
      });

      // Make sure to call callback or webpack will just stop because Node has
      // nothing left in the event queue to do.
      callback();
    });
  });
};

Then in place of storing on the cache you need to call that NS method in your loader.

var fs = require('fs');

// Use the path of the plugin/loader directory to avoid conflicts on the loaderContext.
var NS = fs.realpathSync(__dirname);

module.exports = function() {
  // Do needed loader work
  // ...

  // Make sure this data is ok to be JSON stringified and parsed.
  this[NS](result);

  // Any further loader work
  // ...
};

MoOx · 2016-09-11T20:01:05Z

The thing is: our loader is not just doing a feed, it's also generating json for each entry (md file) an return an object with the path to the emited file. And this cache is used for the static build, which avoid us to read data twice (but maybe we should read it twice...)
I will try to investigate but I guess we might end with a refactoring somewhere so your plugin work correctly with our project :(

mzgoddard · 2016-09-11T23:41:54Z

@MoOx keep using the loader to do those parts, to generate json per file and return the path to that file. Its just the feeds that need to be made by a plugin. This part of the loader needs to be done by a plugin. You don't need to read data twice, the plugin exposes a function your loader uses to save that data so the data can be reused by the plugin later. You could have a function on your plugin to expose the saved info to any other part of your build.

- Changed: RSS feeds should now be generated by ``PhenomicLoaderFeedWebpackPlugin``. You need to remove the ``feeds`` & ``feedsOptions`` sections from the loader configuration and instead add them in a new webpack plugin ``new PhenomicLoaderFeedWebpackPlugin({feedsOptions: …, feeds: { …``. You will find the appropriate import in `import PhenomicLoaderWebpackPlugin from “phenomic/lib/loader-feed-webpack-plugin”``.

MoOx · 2016-09-13T21:25:18Z

@mzgoddard your advices and webpack expertise were really precious. Now everything works as expected. Thank you so much for all your contributions.

MoOx added 10 commits September 8, 2016 13:45

Docs: stop using non transpiled src, since this will cause issue when…

869d3f9

… upgrading to webpack 2

Simplify integration of babel-preset-react-hmre

5322470

Ensure it’s optional.

Minor dev server adjustements

e0c1ebf

Make babel-preset-es2015 optional (as it's not required anyway)

a967331

Docs: update for webpack 2

89f839c

Ref #421

Update hard-source-webpack-plugin

9226c7d

Enforce babel-* prefix project convention (use prefix all the time) f…

083ddfa

…or babel-plugin-istanbul

Changed(boilerplate): replace babel-preset-react-hmre by react-hot-lo…

1e66a94

…ader v3 Unblock #46

Docs: replace babel-preset-react-hmre by react-hot-loader v3

5aea575

Ref #46

MoOx added status: review needed blocked labels Sep 8, 2016

MoOx mentioned this pull request Sep 8, 2016

Upgrade to webpack@2 #421

Closed

thangngoc89 reviewed Sep 9, 2016
View reviewed changes

Simplify scritpts/phenomic.*.js

784f1bd

thangngoc89 added a commit to thangngoc89/dnh-cpp that referenced this pull request Sep 10, 2016

Avoid bundling phenomic-loader's dependencies

4053532

Check back when this is merge MoOx/phenomic#737

MoOx added 2 commits September 10, 2016 22:35

Removed: phenomic/lib/content-loader is now totally gone after be…

89abc71

…ing deprecated in 0.16

MoOx force-pushed the webpack-2 branch from 805d558 to 08bd04f Compare September 10, 2016 21:51

MoOx removed the blocked label Sep 10, 2016

MoOx added the blocked label Sep 10, 2016

Update hard-source-webpack-plugin to 0.0.37

f687bea

MoOx removed the blocked label Sep 13, 2016

MoOx merged commit ea19f2c into master Sep 13, 2016

MoOx deleted the webpack-2 branch September 13, 2016 22:32

MoOx added status: accepted and removed status: review needed labels Sep 13, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Switch to Webpack 2 #737

Switch to Webpack 2 #737

MoOx commented Sep 8, 2016 •

edited

Loading

thangngoc89 Sep 9, 2016

MoOx Sep 9, 2016

MoOx Sep 9, 2016

thangngoc89 Sep 9, 2016

thangngoc89 commented Sep 9, 2016

MoOx commented Sep 9, 2016

thangngoc89 commented Sep 9, 2016

MoOx commented Sep 9, 2016

thangngoc89 commented Sep 9, 2016

MoOx commented Sep 9, 2016

MoOx commented Sep 9, 2016

thangngoc89 commented Sep 9, 2016 •

edited

Loading

MoOx commented Sep 9, 2016

MoOx commented Sep 10, 2016

MoOx commented Sep 10, 2016

mzgoddard commented Sep 11, 2016

MoOx commented Sep 11, 2016

MoOx commented Sep 11, 2016

mzgoddard commented Sep 11, 2016

MoOx commented Sep 11, 2016

mzgoddard commented Sep 11, 2016 •

edited

Loading

MoOx commented Sep 13, 2016

		@@ -1,26 +1,32 @@
		// Hot loading HRM Patch
		import "react-hot-loader/patch"

Switch to Webpack 2 #737

Switch to Webpack 2 #737

Conversation

MoOx commented Sep 8, 2016 • edited Loading

thangngoc89 Sep 9, 2016

Choose a reason for hiding this comment

MoOx Sep 9, 2016

Choose a reason for hiding this comment

MoOx Sep 9, 2016

Choose a reason for hiding this comment

thangngoc89 Sep 9, 2016

Choose a reason for hiding this comment

thangngoc89 commented Sep 9, 2016

MoOx commented Sep 9, 2016

thangngoc89 commented Sep 9, 2016

MoOx commented Sep 9, 2016

thangngoc89 commented Sep 9, 2016

MoOx commented Sep 9, 2016

MoOx commented Sep 9, 2016

thangngoc89 commented Sep 9, 2016 • edited Loading

MoOx commented Sep 9, 2016

MoOx commented Sep 10, 2016

MoOx commented Sep 10, 2016

mzgoddard commented Sep 11, 2016

MoOx commented Sep 11, 2016

MoOx commented Sep 11, 2016

mzgoddard commented Sep 11, 2016

MoOx commented Sep 11, 2016

mzgoddard commented Sep 11, 2016 • edited Loading

MoOx commented Sep 13, 2016

MoOx commented Sep 8, 2016 •

edited

Loading

thangngoc89 commented Sep 9, 2016 •

edited

Loading

mzgoddard commented Sep 11, 2016 •

edited

Loading