@studyportals/webpack-helper 3.0.0-beta.8 → 3.0.0-beta.9

package/README.md

@@ -4,6 +4,7 @@ WebpackHelper is a utility that makes it easy to set up a webpack configuration
 
 ## Table of Contents
 - [Webpack version](#webpack-version)
+  - [Notes on updating Webpack from v4 to v5](#notes-on-updating-webpack-from-v4-to-v5)
 - [Quick Start](#quick-start)
 - [Configuration](#configuration)
   - [entry](#entry-required)
@@ -22,6 +23,50 @@ WebpackHelper is a utility that makes it easy to set up a webpack configuration
 ## Webpack version
 This version of WebpackHelper is based on webpack 5. Some earlier WebpackHelper versions used earlier versions of Webpack. If you get syntax errors when updating to the latest version of WebpackHelper, please check out the [Webpack documentation](https://webpack.js.org/configuration/).
 
+### Notes on updating Webpack from v4 to v5
+Below are some notes that might be helpful when you're upgrading a microservice from webpack-helper v2 (based on Webpack v4) to v3 (based on Webpack v5).
+
+#### Dev server
+Webpack-helper **v2 and below**: Your `development.devServer` file might include these parts:
+```javascript
+{
+    development: {
+        devServer: {
+            open: true,
+            overlay: true,
+            writeToDisk: true
+        }
+    }
+}
+```
+Webpack-helper **v3 and beyond**: Your `webpack.config.js` file should configure those parts like this:
+```javascript
+{
+    development: {
+        devServer: {
+            client: {
+                overlay: true
+            },
+            devMiddleware: {
+                writeToDisk: true
+            },
+            open: true,
+            static: path.join(__dirname, '.') // Related to writeToDisk.
+        }
+    }
+}
+```
+
+#### Exporting
+Webpack-helper **v2 and below**: Your `webpack.config.js` file ended with the following:
+```javascript
+module.exports = mode => configuration.get(mode);
+```
+Webpack-helper **v3 and beyond**: Your `webpack.config.js` file should end with the following (as is also mentioned further below):
+```javascript
+module.exports = (env, details) => configuration.get(details.mode);
+```
+
 ## Quick Start
 
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studyportals/webpack-helper",
-  "version": "3.0.0-beta.8",
+  "version": "3.0.0-beta.9",
   "description": "A collection of standard configurations and helpers for webpack.",
   "main": "src/main.js",
   "scripts": {

package/src/defaults/development.config.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DevelopmentConfig = void 0;
 exports.DevelopmentConfig = {
     optimization: {
         minimize: false

package/src/defaults/production.config.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProductionConfig = void 0;
 const webpack = require('webpack');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const DllAvailabilityTracker = require('@studyportals/dll-availability-tracker');

package/src/enums/mode.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Mode = void 0;
 var Mode;
 (function (Mode) {
     Mode["DEVELOPMENT"] = "development";

package/src/enums/preset.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Preset = void 0;
 var Preset;
 (function (Preset) {
     Preset["VUE_TYPESCRIPT"] = "vue-typescript";

package/src/factories/configuration-factory.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConfigurationFactory = void 0;
 const configuration_1 = require("../model/configuration");
 class ConfigurationFactory {
     create(options) {

package/src/model/configuration.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Configuration = void 0;
 const entry_1 = require("./entry");
 const output_1 = require("./output");
 const plugins_1 = require("./plugins");
@@ -26,9 +25,11 @@ class Configuration {
         this.plugins = new plugins_1.Plugins(options.plugins);
         this.module = new module_1.Module(options.module);
         this.commonConfig = options.common || {};
+        const configDev = options[mode_1.Mode.DEVELOPMENT] ? options[mode_1.Mode.DEVELOPMENT] : {};
+        const configPrd = options[mode_1.Mode.PRODUCTION] ? options[mode_1.Mode.PRODUCTION] : {};
         this.environmentSpecificConfig = {
-            [mode_1.Mode.DEVELOPMENT]: merge([options[mode_1.Mode.DEVELOPMENT], development_config_1.DevelopmentConfig]) || development_config_1.DevelopmentConfig,
-            [mode_1.Mode.PRODUCTION]: merge([options[mode_1.Mode.PRODUCTION], production_config_1.ProductionConfig(this.bob)]) || production_config_1.ProductionConfig(this.bob)
+            [mode_1.Mode.DEVELOPMENT]: merge([configDev, development_config_1.DevelopmentConfig]) || development_config_1.DevelopmentConfig,
+            [mode_1.Mode.PRODUCTION]: merge([configPrd, production_config_1.ProductionConfig(this.bob)]) || production_config_1.ProductionConfig(this.bob)
         };
         this.detectPresets();
     }

package/src/model/entry.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Entry = void 0;
 class Entry {
     constructor(entry) {
         this.entry = entry;

package/src/model/module.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Module = void 0;
 const { merge } = require('webpack-merge');
 class Module {
     constructor(module = {}) {

package/src/model/output.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Output = void 0;
 class Output {
     constructor(outputConfig) {
         this.path = outputConfig.path;

package/src/model/plugins.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Plugins = void 0;
 class Plugins {
     constructor(plugins = []) {
         this.plugins = [];

package/src/presets/javascript.preset.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.JavascriptPreset = void 0;
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 class JavascriptPreset {
     getPlugins(filename) {

package/src/presets/typescript.preset.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TypeScriptPreset = void 0;
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 class TypeScriptPreset {
     getPlugins(filename) {

package/src/presets/vue-typescript.preset.js

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VueTypeScriptPreset = void 0;
 const webpack = require("webpack");
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const VueLoaderPlugin = require('vue-loader').VueLoaderPlugin;