gricard · April 20, 2025 23:06 · Sep 11, 2018 · Mar 19, 2018 · Mar 19, 2018 · Mar 19, 2018
diff --git a/webpack4upgrade.md b/webpack4upgrade.md
@@ -1,3 +1,5 @@
+# If you enjoyed reading this, I'm intending to do more blogging like this over here: https://cdgd.tech
+
 # This is not a complaint about Webpack or v4 in any way. This is just a record of my process trying it out so I could provide feedback to the webpack team
 
 

diff --git a/webpack4upgrade.md b/webpack4upgrade.md
@@ -387,3 +387,97 @@ Took a while to figure out how to update my config properly, but it works.
 
 57% faster build, 1.5% larger total bundle size (weird, but not a deal-breaker).
 
+
+# Final config
+```javascript
+var webpack = require('webpack');
+
+// use resolve() to normalize paths between unix/windows environments
+var path = require('path');
+
+function resolve (dir) {
+    return path.join(__dirname, '..', dir)
+}
+
+module.exports = {
+
+    mode: 'production',
+
+    entry: {
+        player: resolve('app/main/index.js'),
+
+        // code splitting: we take all of our vendor code and put it in a separate bundle (vendor.min.js)
+        // this way it will have better caching/cache hits since it changes infrequently
+        vendor: [
+            // local packages
+            'clipboard',
+            'jquerynotify'
+
+            // npm packages are added to vendor code separately in splitChunks config below
+        ]
+    },
+
+    output: {
+        path: resolve('app/'),
+        filename: '[name].min.js'
+    },
+
+    optimization: {
+        splitChunks: {
+            cacheGroups: {
+                commons: {
+                    test: /[\\/]node_modules[\\/]/,
+                    name: 'vendor',
+                    chunks: 'all'
+                }
+            }
+        }
+    },
+
+    module: {
+        rules: [
+            {
+                test: /\.css$/,
+                loader: 'style!css'
+            },
+            {
+                test: /\.html$/,
+                use: 'raw-loader'
+            },
+            {
+                test: /^(?!.*\.{test,min}\.js$).*\.js$/,
+                exclude: /(node_modules)/,
+                use: {
+                    loader: 'babel-loader'
+                }
+            }
+        ]
+    },
+
+    resolve: {
+        modules: [
+            resolve('app'),
+            resolve('app/css'),
+            'node_modules'
+        ],
+
+        alias: {
+            // external libraries
+            jquerynotify: resolve('app/js/jquery.notify.min'),
+            clipboard: resolve('app/js/clipboard.min'),
+
+            // directory alias to shorten template paths
+            templates: resolve('app/templates')
+        }
+    },
+
+    plugins: [
+        // ensure that we get a production build of any dependencies
+        // this is primarily for React, where this removes 179KB from the bundle
+        new webpack.DefinePlugin({
+            'process.env.NODE_ENV': '"production"'
+        })
+    ]
+
+};
+```
diff --git a/webpack4upgrade.md b/webpack4upgrade.md
@@ -1,4 +1,4 @@
-#This is not a complaint about Webpack or v4 in any way. This is just a record of my process trying it out so I could provide feedback to the webpack team#
+# This is not a complaint about Webpack or v4 in any way. This is just a record of my process trying it out so I could provide feedback to the webpack team
 
 
 Hmm... I don't see any docs for 4.0 on https://webpack.js.org. I guess I'll just wing it. 

diff --git a/webpack4upgrade.md b/webpack4upgrade.md
@@ -1,4 +1,4 @@
-#This is not a complaint about Webpack or v4 in any way. This is just a record of my process trying it out so I could provide feedback to the webpack team. 
+#This is not a complaint about Webpack or v4 in any way. This is just a record of my process trying it out so I could provide feedback to the webpack team#
 
 
 Hmm... I don't see any docs for 4.0 on https://webpack.js.org. I guess I'll just wing it. 

diff --git a/webpack4upgrade.md b/webpack4upgrade.md
@@ -1,3 +1,6 @@
+#This is not a complaint about Webpack or v4 in any way. This is just a record of my process trying it out so I could provide feedback to the webpack team. 
+
+
 Hmm... I don't see any docs for 4.0 on https://webpack.js.org. I guess I'll just wing it. 
 All I need to do is `npm i -D webpack@next`, right?
 

diff --git a/webpack4upgrade.md b/webpack4upgrade.md
@@ -233,7 +233,11 @@ What do you mean splitChunks is unknown?
 
 Nothing helpful...
 
-*checks webpack beta article again* Ok, so that says optimization.splitChunks, let's try this, then:
+*checks webpack beta article again* 
+
+Ok, so that says optimization.splitChunks, let's try this, then:
+
+(Edit: oh, duh, it actually says config.optimization.splitChunks in the warning about CommonsChunkPlugin... Durrrr)
 
 ```
     optimization: {
@@ -259,7 +263,7 @@ Conflict: Multiple assets emit to the same filename player.min.js
 
 Where are the docs for the config options for 4.0? 
 
-Maybe I'll just check the source... There's [apotentially relevant example](https://github.com/webpack/webpack/tree/master/examples/explicit-vendor-chunk) in there, but it's not really clear if it does what I need to do, as it's not really documented. 
+Maybe I'll just check the source... There's [a potentially relevant example](https://github.com/webpack/webpack/tree/master/examples/explicit-vendor-chunk) in there, but it's not really clear if it does what I need to do, as it's not really documented. 
 
 Hmm.. Actually, [this example](https://github.com/webpack/webpack/tree/master/examples/two-explicit-vendor-chunks) makes a little more sense. Looks like I need to change output.filename to use '[name]' instead of the explicit name I had before. 
 

diff --git a/webpack4upgrade.md b/webpack4upgrade.md
@@ -162,7 +162,7 @@ webpack-cli 2.0.6
 Usage: https://webpack.js.org/api/cli/
 Usage without config file: webpack <entry> [<entry>] --output [-o] <output>
 Usage with config file: webpack
-...entire hlep output again...
+...entire help output again...
 ```
 
 Right. That didn't help. 

diff --git a/webpack4upgrade.md b/webpack4upgrade.md
@@ -136,7 +136,7 @@ Oh, and it did say to install webpack-cli first. Duh. Should have googled and re
 
 Where the hell is this even coming from? I have never seen this before. Whatever...
 
-Why am I getting the webpack help out? Let's get rid of everything but the --config option and see what happens.
+Why am I getting the webpack help output? Let's get rid of everything but the --config option and see what happens.
 
 ```
 $ npm run buildjs

diff --git a/webpack4upgrade.md b/webpack4upgrade.md
@@ -378,5 +378,5 @@ total		998616
 # Summary
 Took a while to figure out how to update my config properly, but it works. 
 
-57% faster build, 1.5% larger total bundle size. 
+57% faster build, 1.5% larger total bundle size (weird, but not a deal-breaker).
 
diff --git a/webpack4upgrade.md b/webpack4upgrade.md
@@ -187,7 +187,9 @@ splitChunks: {
 }
 ```
 
-Nope. That's got a syntax error. *fixes*
+Nope. That's got a syntax error. 
+
+*fixes*
 
 ```
 splitChunks: {

diff --git a/webpack4upgrade.md b/webpack4upgrade.md
@@ -312,4 +312,69 @@ Entrypoint player [big] = vendor.min.js player.min.js
 
 There we go!
 
-Oh, wait, is it doing the minimization? Yeah, must be. [This article](https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a) says it's on by default in production mode now. Ok, cool.
+Oh, wait, is it doing the minimization? Yeah, must be. [This article](https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a) says it's on by default in production mode now. Ok, cool.
+
+
+# Webpack 3.11 build
+```
+$ time npm run buildjs
+
+> cross-env BABEL_ENV=production webpack --optimize-minimize --display-modules --progress --colors --config build/webpack.prod.config.js
+
+Hash: e7e52a3df71a5bc44924
+Version: webpack 3.11.0
+Time: 19783ms
+        Asset    Size  Chunks                    Chunk Names
+player.min.js  495 kB       0  [emitted]  [big]  app
+vendor.min.js  491 kB       1  [emitted]  [big]  vendor
+...modules...
+
+real    0m23.698s
+user    0m0.046s
+sys     0m0.477s
+```
+
+Output file sizes:
+
+```
+player.min.js	491274
+vendor.min.js	491988
+
+total		983262
+```
+
+
+# Webpack 4.0.0.beta.2 build
+```
+$ time npm run buildjs
+
+> cross-env BABEL_ENV=production webpack --display-modules --progress --colors --config build/webpack.prod.config.js
+
+ 10% building modules 1/1 modules 0 active(node:13084) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
+(node:13084) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead         Hash: 9f00b0adf58d23d3596a                Version: webpack 4.0.0-beta.2
+Time: 8430ms
+Built at: 2018-2-22 08:52:15
+        Asset     Size  Chunks                    Chunk Names
+vendor.min.js  474 KiB       0  [emitted]  [big]  vendor
+player.min.js  502 KiB       1  [emitted]  [big]  player
+Entrypoint player [big] = vendor.min.js player.min.js
+
+real    0m12.717s
+user    0m0.137s
+sys     0m0.325s
+```
+
+Output file sizes:
+
+```
+player.min.js	513680
+vendor.min.js	484936
+
+total		998616
+```
+
+# Summary
+Took a while to figure out how to update my config properly, but it works. 
+
+57% faster build, 1.5% larger total bundle size. 
+
diff --git a/webpack4upgrade.md b/webpack4upgrade.md
@@ -310,4 +310,6 @@ player.min.js  502 KiB       1  [emitted]  [big]  player
 Entrypoint player [big] = vendor.min.js player.min.js
 ```
 
-There we go!
+There we go!
+
+Oh, wait, is it doing the minimization? Yeah, must be. [This article](https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a) says it's on by default in production mode now. Ok, cool.
diff --git a/webpack4upgrade.md b/webpack4upgrade.md
@@ -259,4 +259,55 @@ Where are the docs for the config options for 4.0?
 
 Maybe I'll just check the source... There's [apotentially relevant example](https://github.com/webpack/webpack/tree/master/examples/explicit-vendor-chunk) in there, but it's not really clear if it does what I need to do, as it's not really documented. 
 
+Hmm.. Actually, [this example](https://github.com/webpack/webpack/tree/master/examples/two-explicit-vendor-chunks) makes a little more sense. Looks like I need to change output.filename to use '[name]' instead of the explicit name I had before. 
 
+```
+$ npm run buildjs
+
+> cross-env BABEL_ENV=production webpack --display-modules --progress --colors --config build/webpack.prod.config.js
+
+ 10% building modules 1/1 modules 0 active(node:7716) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
+(node:7716) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead          Hash: 73c0f51bb0e7ea4f011a                Version: webpack 4.0.0-beta.2
+Time: 15589ms
+Built at: 2018-2-22 08:38:10
+        Asset     Size  Chunks                    Chunk Names
+vendor.min.js  474 KiB       0  [emitted]  [big]  vendor
+   app.min.js  502 KiB       1  [emitted]  [big]  app
+Entrypoint app [big] = vendor.min.js app.min.js
+...shitload of modules...
+
+WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
+This can impact web performance.
+Assets:
+  vendor.min.js (474 KiB)
+  app.min.js (502 KiB)
+
+WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
+Entrypoints:
+  app (975 KiB)
+      vendor.min.js
+      app.min.js
+
+
+WARNING in webpack performance recommendations:
+You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
+For more info visit https://webpack.js.org/guides/code-splitting/
+```
+
+Oh, shit. Did that actually work? Yes! 
+
+Wait, but now I have app.min.js and vendor.min.js. Oh, I see. I need to rename my entry to have that used as the filename. 
+
+*edits config*
+
+```
+Hash: 9f00b0adf58d23d3596a                Version: webpack 4.0.0-beta.2
+Time: 12777ms
+Built at: 2018-2-22 08:41:44
+        Asset     Size  Chunks                    Chunk Names
+vendor.min.js  474 KiB       0  [emitted]  [big]  vendor
+player.min.js  502 KiB       1  [emitted]  [big]  player
+Entrypoint player [big] = vendor.min.js player.min.js
+```
+
+There we go!
diff --git a/webpack4upgrade.md b/webpack4upgrade.md
@@ -56,7 +56,23 @@ Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optim
 
 Oh, that too, eh? Ok. 
 
-*edits*
+I'll cut these out, then:
+
+```
+new webpack.optimize.CommonsChunkPlugin({
+    name: 'vendor',
+    filename: 'vendor.min.js',
+    minChunks: module => /node_modules/.test(module.resource)
+}),
+
+new webpack.optimize.UglifyJsPlugin({
+    compress: {
+	unused: false
+    }
+}),
+```
+
+Ok, now...
 
 ```
 $ npm run buildjs

diff --git a/webpack4upgrade.md b/webpack4upgrade.md
@@ -211,7 +211,9 @@ Invalid configuration object. Webpack has been initialised using a configuration
 
 What do you mean splitChunks is unknown? 
 
-*googles* Nothing helpful...
+*googles* 
+
+Nothing helpful...
 
 *checks webpack beta article again* Ok, so that says optimization.splitChunks, let's try this, then:
 

diff --git a/webpack4upgrade.md b/webpack4upgrade.md
@@ -54,7 +54,9 @@ $ npm run buildjs
 Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
 ```
 
-Oh, that too, eh? Ok. *edits*
+Oh, that too, eh? Ok. 
+
+*edits*
 
 ```
 $ npm run buildjs

diff --git a/webpack4upgrade.md b/webpack4upgrade.md
@@ -43,6 +43,7 @@ Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.o
 ```
 
 Alrighty, it's supposed to be "zero config" now. Let's see what happens when I just take that out. #0CJS #yolo 
+
 *edits webpack config* 
 
 But wait, how do I specify the name for my vendor bundle? Well, let's try running it and see what happens. 

diff --git a/webpack4upgrade.md b/webpack4upgrade.md
@@ -0,0 +1,241 @@
+Hmm... I don't see any docs for 4.0 on https://webpack.js.org. I guess I'll just wing it. 
+All I need to do is `npm i -D webpack@next`, right?
+
+```
++ [email protected]
+added 1 package, removed 20 packages and updated 4 packages in 13.081s
+```
+
+Cool! Ok...
+
+```
+$ npm run buildjs
+
+The CLI moved into a separate package: webpack-cli.
+Please install 'webpack-cli' in addition to webpack itself to use the CLI.
+-> When using npm: npm install webpack-cli -D
+-> When using yarn: yarn add webpack-cli -D
+```
+
+Agh! Alright. I'll install that too.
+
+```
+$ npm i -D webpack-cli@next
+npm ERR! code ETARGET
+npm ERR! notarget No matching version found for webpack-cli@next
+npm ERR! notarget In most cases you or one of your dependencies are requesting
+npm ERR! notarget a package version that doesn't exist.
+```
+
+Oh, maybe it doesn't need '@next'?
+
+```
+$ npm i -D webpack-cli
+...
++ [email protected]
+added 209 packages in 39.639s
+```
+
+Ok. Let's try that build again...
+
+```
+Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
+```
+
+Alrighty, it's supposed to be "zero config" now. Let's see what happens when I just take that out. #0CJS #yolo 
+*edits webpack config* 
+
+But wait, how do I specify the name for my vendor bundle? Well, let's try running it and see what happens. 
+
+```
+$ npm run buildjs
+...
+Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.
+```
+
+Oh, that too, eh? Ok. *edits*
+
+```
+$ npm run buildjs
+...
+Error: Cannot find module 'uglifyjs-webpack-plugin'
+```
+
+Gah. 
+
+```
+$ npm i -D uglifyjs-webpack-plugin
+...
++ [email protected]
+added 1 package, removed 1 package and updated 5 packages in 10.899s
+```
+
+Let's try again...
+
+```
+$ npm run buildjs
+
+...
+
+ 10% building modules 1/1 modules 0 active(node:13692) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
+(node:13692) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead         Hash: 36f7a2376b4b763b21f0                Version: webpack 4.0.0-beta.2
+Time: 8262ms
+Built at: 2018-2-22 07:58:12
+ 1 asset
+Entrypoint app =
+Entrypoint vendor = player.min.js
+
+...module list...
+
+WARNING in configuration
+The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.
+
+ERROR in chunk app [entry]
+player.min.js
+Conflict: Multiple assets emit to the same filename player.min.js
+webpack-cli 2.0.6
+Usage: https://webpack.js.org/api/cli/
+Usage without config file: webpack <entry> [<entry>] --output [-o] <output>
+Usage with config file: webpack
+...entire webpack --help output...
+```
+
+wat.
+
+*googles*
+
+*reads [webpack beta article](https://medium.com/webpack/webpack-4-beta-try-it-today-6b1d27d7d7e2)*
+
+Ok. I guess I don't need to pass --optimize-minimize anymore. And I need this mode config now. Ok. 
+Oh, and it did say to install webpack-cli first. Duh. Should have googled and read this first. 
+
+
+```
+ DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
+(node:3244) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instead
+```
+
+Where the hell is this even coming from? I have never seen this before. Whatever...
+
+Why am I getting the webpack help out? Let's get rid of everything but the --config option and see what happens.
+
+```
+$ npm run buildjs
+
+> [email protected] buildjs C:\Users\gabric\PhpstormProjects\MMC-TRUNK\player
+> cross-env BABEL_ENV=production webpack --config build/webpack.prod.config.js
+
+(node:11724) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
+Hash: e0ad5ef31f134fbe2892
+Version: webpack 4.0.0-beta.2
+Time: 7359ms
+Built at: 2018-2-22 08:08:08
+ 1 asset
+Entrypoint app =
+Entrypoint vendor = player.min.js
+...modules...
+    + 473 hidden modules
+
+ERROR in chunk app [entry]
+player.min.js
+Conflict: Multiple assets emit to the same filename player.min.js
+webpack-cli 2.0.6
+Usage: https://webpack.js.org/api/cli/
+Usage without config file: webpack <entry> [<entry>] --output [-o] <output>
+Usage with config file: webpack
+...entire hlep output again...
+```
+
+Right. That didn't help. 
+
+Let's just try to add the new config for the CommonsChunkPlugin replacement and see what happens.
+
+I'll use [this](https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693) as a guide, I guess.
+
+*reads*
+
+Ok, so I just add this to my config, I guess:
+
+```
+splitChunks: {
+	cacheGroups: {
+		commons: {
+			test: /[\\/]node_modules[\\/]
+			name: "vendors",
+			chunks: "all"
+		}
+	}
+}
+```
+
+Nope. That's got a syntax error. *fixes*
+
+```
+splitChunks: {
+	cacheGroups: {
+		commons: {
+			test: /[\\/]node_modules[\\/]/,
+			name: "vendors",
+			chunks: "all"
+		}
+	}
+}
+```
+
+Sweet big-ass red error, Batman!
+
+```
+$ npm run buildjs
+
+> cross-env BABEL_ENV=production webpack --display-modules --progress --colors --config build/webpack.prod.config.js
+
+Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
+ - configuration has an unknown property 'splitChunks'. These properties are valid:
+   object { mode?, amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, loader?, module?, name?, node?, output?, optimization?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
+   For typos: please correct them.
+   For loader options: webpack 2 no longer allows custom properties in configuration.
+     Loaders should be updated to allow passing options via loader options in module.rules.
+     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
+     plugins: [
+       new webpack.LoaderOptionsPlugin({
+         // test: /\.xxx$/, // may apply this only for some modules
+         options: {
+           splitChunks: ...
+         }
+       })
+     ]
+```
+
+What do you mean splitChunks is unknown? 
+
+*googles* Nothing helpful...
+
+*checks webpack beta article again* Ok, so that says optimization.splitChunks, let's try this, then:
+
+```
+    optimization: {
+        splitChunks: {
+            cacheGroups: {
+                commons: {
+                    test: /[\\/]node_modules[\\/]/,
+                    name: "vendors",
+                    chunks: "all"
+                }
+            }
+        }
+    },
+```
+
+Why am I still getting this webpack help output? How the heck do I fix this error?
+
+```
+ERROR in chunk app [entry]
+player.min.js
+Conflict: Multiple assets emit to the same filename player.min.js
+```
+
+Where are the docs for the config options for 4.0? 
+
+Maybe I'll just check the source... There's [apotentially relevant example](https://github.com/webpack/webpack/tree/master/examples/explicit-vendor-chunk) in there, but it's not really clear if it does what I need to do, as it's not really documented. 
+
+
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1,5 @@
		# If you enjoyed reading this, I'm intending to do more blogging like this over here: https://cdgd.tech

		# This is not a complaint about Webpack or v4 in any way. This is just a record of my process trying it out so I could provide feedback to the webpack team
No results found