Version update - most imporantly Webpack 4 #113

EECOLOR · 2018-04-09T12:25:55Z

EECOLOR · 2018-04-09T12:26:33Z

We need to update 'package.json' file with the actual current versions.

EECOLOR

We should also test this branch against a few sites that are already in production, both watch and build

EECOLOR · 2018-04-09T12:32:45Z

library/webpack-loaders/css-loader.js

@@ -81,7 +81,7 @@ module.exports = function CssLoader(source, map) {

  function executeModuleAt(url) {
    return source => {
-      const completeSource = `const __webpack_public_path__ = '${self.options.output.publicPath || '/'}'\n` + source
+      const completeSource = `const __webpack_public_path__ = '${self._compiler.options.output.publicPath || '/'}'\n` + source


webpack/webpack#5436

EECOLOR · 2018-04-09T12:46:25Z

library/webpack-plugins/websocket-communication-plugin.js

 module.exports = function websocketCommunicationPlugin() {

  return {
    apply: compiler => {
+      // we should add this check to all hooks we create


Ok, do that

EECOLOR · 2018-04-09T13:13:50Z

Used syncyarnlock to update package.json files. For future reference:

syncyarnlock -p ./library -k -s
syncyarnlock -p ./example -k -s
yarn

EECOLOR · 2018-04-09T20:44:46Z

library/webpack-plugins/chunk-manifest-plugin.js

          chunkAssets[chunk.name] = {
            filename,
            hasRuntime: chunk.hasRuntime(),
-            parents: chunk.parents.map(c => c.name).filter(Boolean)
+            isShared,
+            ...(!isShared && { dependencies: group.chunks.filter(x => x !== chunk).map(x => x.name) })


Can not use this syntax for nodejs < 8.6

klaasman

Looks good! Still needs testing with some projects.

klaasman · 2018-04-10T20:22:59Z

example/package.json

-    "react-dom": "^16.2.0",
+    "normalize.css": "^8.0.0",
+    "react": "^16.3.1",
+    "react-dom": "^16.3.1",


react and react-dom aren't necessary anymore - they were defined for [email protected]

klaasman · 2018-04-10T20:23:17Z

library/README.md

@@ -2,6 +2,7 @@

 Breaking changes:

+- v0.0.?? - `chunk-manifest.json` changed


don't forget this

klaasman · 2018-04-10T20:25:22Z

library/package.json

-    "helmet": "^3.9.0",
+    "express": "^4.16.3",
+    "file-loader": "^1.1.11",
+    "find-yarn-workspace-root": "^1.1.0",


klaasman · 2018-04-10T20:28:09Z

library/lib/build.js

@@ -25,7 +30,8 @@ const fragmentResolverPlugin = require('../webpack-resolver-plugins/fragment-res
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
 const ExtendedAPIPlugin = require('webpack/lib/ExtendedAPIPlugin')
 const ProgressBarPlugin = require('progress-bar-webpack-plugin')
-const findYarnWorkspaceRoot = require('find-yarn-workspace-root')
+const TimeFixPlugin = require('time-fix-plugin') // https://github.com/webpack/watchpack/issues/25


Will this fix the weird build loops which occasionally happened?

Most of them, yes

klaasman · 2018-04-10T20:28:36Z

library/lib/build.js

@@ -25,7 +30,8 @@ const fragmentResolverPlugin = require('../webpack-resolver-plugins/fragment-res
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin')
 const ExtendedAPIPlugin = require('webpack/lib/ExtendedAPIPlugin')
 const ProgressBarPlugin = require('progress-bar-webpack-plugin')
-const findYarnWorkspaceRoot = require('find-yarn-workspace-root')
+const TimeFixPlugin = require('time-fix-plugin') // https://github.com/webpack/watchpack/issues/25
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')


klaasman · 2018-04-10T20:54:37Z

library/webpack-plugins/react-universal-plugin.js

        })
      })

      // tell the web compiler to compile, emit the assets and notify the appropriate plugins
-      compiler.plugin('make-additional-entries', (compilation, createEntries, done) => {
+      // Note, we can not use `make` because it's parralel
+      compiler.hooks.makeAdditionalEntries.tapAsync(p, (compilation, _, done) => {


how do we name the third argument, callback or done?

klaasman · 2018-04-10T20:55:39Z

library/webpack-plugins/react-universal-plugin.js

        compilation.dependencyFactories.set(ConstDependency, new NullFactory())
        compilation.dependencyTemplates.set(ConstDependency, new ConstDependency.Template())
-        compilation.mainTemplate.plugin('require-extensions', function(source, chunk, hash) {
+        compilation.mainTemplate.hooks.requireExtensions.tap(p, function(source, chunk, hash) {


arrow function is fine

klaasman · 2018-04-10T20:56:49Z

library/webpack-plugins/react-universal-plugin.js

        })
+        compilation.mainTemplate.hooks.globalHash.tap(p, () => true)
+        normalModuleFactory.hooks.parser.for('javascript/auto').tap(p, addParserHooks)
+        normalModuleFactory.hooks.parser.for('javascript/dynamic').tap(p, addParserHooks)


no idea what's happening here with the auto/dynamic stuff?

Check here for an explanation of these: https://medium.com/webpack/webpack-4-released-today-6cdb994702d4#b6a9

It essentially requires us to define in which types of files this hook should trigger.

klaasman · 2018-04-10T20:58:02Z

library/webpack-plugins/react-universal-plugin.js

        })
+        compilation.mainTemplate.hooks.globalHash.tap(p, () => true)
+        normalModuleFactory.hooks.parser.for('javascript/auto').tap(p, addParserHooks)
+        normalModuleFactory.hooks.parser.for('javascript/dynamic').tap(p, addParserHooks)


I notice there's duplicate code in merge-css-plugin

What is the duplication?

compilation.dependencyFactories.set(ConstDependency, new NullFactory()) compilation.dependencyTemplates.set(ConstDependency, new ConstDependency.Template()) compilation.mainTemplate.hooks.requireExtensions.tap(p, function(source, chunk, hash) { // ... } compilation.mainTemplate.hooks.globalHash.tap(p, () => true) normalModuleFactory.hooks.parser.for('javascript/auto').tap(p, addParserHooks) normalModuleFactory.hooks.parser.for('javascript/dynamic').tap(p, addParserHooks)

Might be just fine like this

Ahh, yeah, the code looks very similar. It even is similar, but I am unsure if I want to extract it. I'll experiment with it.

I changed it, despite the amount of arguments required I think it's a good abstraction. It also showed a few minor flaws so it already paid off (or proved that evaluateTypeOf was not used).

Haha, check what I found (committed at Oct 1, 2017): https://github.com/kaliberjs/build/blob/aec93e775f305362b15acf864741adb49e6ef31d/library/lib/webpack-utils.js

The code is very similar, haha: https://github.com/kaliberjs/build/blob/89b75cf5ade159f4dfb4cc8ab9ff4ad247a9db1a/library/lib/webpack-utils.js

klaasman · 2018-04-10T20:59:32Z

library/webpack-plugins/websocket-communication-plugin.js

        })
+        compilation.mainTemplate.hooks.globalHash.tap(p, () => true)
+        normalModuleFactory.hooks.parser.for('javascript/auto').tap(p, addParserHooks)
+        normalModuleFactory.hooks.parser.for('javascript/dynamic').tap(p, addParserHooks)


more duplicate code

EECOLOR · 2018-04-11T20:16:52Z

Ok, I think the only thing we need to do for this release is test 😄

Conflicts: package.json yarn.lock

`*.entry.css` classnames are no longer hashed

EECOLOR added 3 commits April 8, 2018 01:14

updated webpack to 4.5.0 - fixes #110

c832aad

moved web related options into build.js

b10da13

simplified hook related code

3810e9e

EECOLOR added 2 commits April 9, 2018 14:41

added breaking change to readme

e474861

removed double comment

cdc4bdc

EECOLOR commented Apr 9, 2018

View reviewed changes

EECOLOR added 3 commits April 9, 2018 14:54

added checks to hook registration

5dd0de6

Merge branch 'master' into version-update

73a752e

updated versions in package.json files to reflect yarn.lock

6b17ee9

EECOLOR requested a review from klaasman April 9, 2018 13:14

EECOLOR commented Apr 9, 2018

View reviewed changes

klaasman suggested changes Apr 10, 2018

View reviewed changes

EECOLOR mentioned this pull request Apr 10, 2018

Disable requiring sub-dependencies #111

Closed

EECOLOR added 6 commits April 11, 2018 21:44

moved the code for the creation of a built-in variable to a utils file

89b75cf

changed syntax to be nodejs 6 compatible

44e1197

removed unneeded dependencies

4c114f7

set most likely version number of the breaking change in the readme

611b0d9

removed useless comments

56a6a4b

changed done to callback to be more consisten

04eaf0c

EECOLOR and others added 5 commits April 11, 2018 22:21

updated to latest version

d983f1f

Merge branch 'master' into version-update

15ac9a6

Conflicts: package.json yarn.lock

visual studio code told me (correctly) that new was not needed here

a29a97c

*.entry.css classnames are no longer hashed

1058e60

Merge pull request #114 from kaliberjs/entry-css-loader-global-scope

296118b

`*.entry.css` classnames are no longer hashed

klaasman merged commit b283a95 into master Apr 18, 2018

klaasman deleted the version-update branch April 18, 2018 14:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Version update - most imporantly Webpack 4 #113

Version update - most imporantly Webpack 4 #113

EECOLOR commented Apr 9, 2018

EECOLOR commented Apr 9, 2018

EECOLOR left a comment

EECOLOR Apr 9, 2018

EECOLOR Apr 9, 2018

EECOLOR commented Apr 9, 2018

EECOLOR Apr 9, 2018

klaasman left a comment

klaasman Apr 10, 2018

klaasman Apr 10, 2018

klaasman Apr 10, 2018

klaasman Apr 10, 2018

EECOLOR Apr 11, 2018

klaasman Apr 10, 2018

klaasman Apr 10, 2018

klaasman Apr 10, 2018

klaasman Apr 10, 2018

EECOLOR Apr 11, 2018

klaasman Apr 10, 2018

EECOLOR Apr 11, 2018

klaasman Apr 11, 2018

EECOLOR Apr 11, 2018

EECOLOR Apr 11, 2018

EECOLOR Apr 14, 2018

klaasman Apr 10, 2018

EECOLOR commented Apr 11, 2018

		@@ -2,6 +2,7 @@

		Breaking changes:

		- v0.0.?? - `chunk-manifest.json` changed

Version update - most imporantly Webpack 4 #113

Version update - most imporantly Webpack 4 #113

Conversation

EECOLOR commented Apr 9, 2018

EECOLOR commented Apr 9, 2018

EECOLOR left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

EECOLOR commented Apr 9, 2018

Choose a reason for hiding this comment

klaasman left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

EECOLOR commented Apr 11, 2018