@studyportals/webpack-helper 3.0.0-beta.8 → 3.0.1-beta.0

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,13 +1,12 @@
 {
   "name": "@studyportals/webpack-helper",
-  "version": "3.0.0-beta.8",
+  "version": "3.0.1-beta.0",
   "description": "A collection of standard configurations and helpers for webpack.",
   "main": "src/main.js",
   "scripts": {
     "test": "jest --coverage",
     "build": "tsc",
-    "prepublish": "npm run build",
-    "postinstall": "cp ./assets/.babelrc ./assets/.browserslistrc ../../../"
+    "prepublish": "npm run build"
   },
   "files": [
     "src/**/*.js",
@@ -28,10 +27,10 @@
     "@babel/preset-env": "^7.5.5",
     "@babel/preset-typescript": "^7.3.3",
     "@babel/runtime": "^7.5.5",
-    "@studyportals/bob-manifest-generator": "^2.3.1",
+    "@studyportals/bob-manifest-generator": "^3.0.0",
     "@studyportals/browserslist-config": "^1.2.0",
-    "@studyportals/dll-availability-tracker": "^1.0.2",
-    "@studyportals/vue-config": "4.0.0-beta.4",
+    "@studyportals/dll-availability-tracker": "^2.0.0",
+    "@studyportals/vue-config": "^4.0.0",
     "babel-loader": "^8.2.3",
     "css-loader": "^6.5.1",
     "file-loader": "^6.2.0",

package/src/model/configuration.js

@@ -26,13 +26,15 @@ 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();
     }
     get(mode) {
+        this.detectPresets(mode);
         return merge({
             entry: this.entry.getEntry(),
             output: this.output.getOutput(),
@@ -50,10 +52,10 @@ class Configuration {
             devtool: 'source-map'
         }, this.getBobConfig(), this.commonConfig, this.getEnvironmentSpecificConfig(mode), { mode });
     }
-    detectPresets() {
+    detectPresets(mode) {
         switch (this.preset) {
             case preset_1.Preset.VUE_TYPESCRIPT:
-                this.injectPreset(new vue_typescript_preset_1.VueTypeScriptPreset());
+                this.injectPreset(new vue_typescript_preset_1.VueTypeScriptPreset(mode));
                 break;
             case preset_1.Preset.TYPESCRIPT:
                 this.injectPreset(new typescript_preset_1.TypeScriptPreset());

package/src/model/output.js

@@ -4,7 +4,7 @@ exports.Output = void 0;
 class Output {
     constructor(outputConfig) {
         this.path = outputConfig.path;
-        this.publicPath = outputConfig.publicPath || null;
+        this.publicPath = typeof outputConfig.publicPath === "string" ? outputConfig.publicPath : null;
         this.library = outputConfig.library || null;
         this.addHash = this.shouldAddHash(outputConfig.hash),
             this.fileName = outputConfig.fileName || "[name]";

package/src/presets/typescript.preset.js

@@ -30,13 +30,24 @@ class TypeScriptPreset {
                 },
                 {
                     test: /\.tsx?$/,
-                    loader: 'ts-loader',
-                    exclude: /node_modules\/(?!@studyportals\/).*/
+                    exclude: /node_modules\/(?!@studyportals\/).*/,
+                    use: [
+                        {
+                            loader: 'babel-loader',
+                        },
+                        {
+                            loader: 'ts-loader'
+                        }
+                    ],
                 },
                 {
                     test: /\.js$/,
-                    loader: 'babel-loader',
-                    exclude: /node_modules\/(?!@studyportals\/).*/
+                    exclude: /node_modules\/(?!@studyportals\/).*/,
+                    use: [
+                        {
+                            loader: 'babel-loader',
+                        }
+                    ]
                 },
                 {
                     test: /\.(png|jpg|gif|svg)$/,

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

@@ -1,14 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VueTypeScriptPreset = void 0;
+const mode_1 = require("../enums/mode");
 const webpack = require("webpack");
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const VueLoaderPlugin = require('vue-loader').VueLoaderPlugin;
 class VueTypeScriptPreset {
+    constructor(mode) {
+        this.mode = mode;
+    }
     getPlugins(filename) {
         return [
             new webpack.DllReferencePlugin({
-                manifest: require("@studyportals/vue-config/dist/vue3_library.json")
+                manifest: require(`@studyportals/vue-config/dist/vue3_library${this.mode === mode_1.Mode.PRODUCTION ? '.min' : ''}.json`)
             }),
             new MiniCssExtractPlugin({
                 filename
@@ -44,16 +48,22 @@ class VueTypeScriptPreset {
                                 'css-loader',
                                 'sass-loader'
                             ]
-                        }
+                        },
+                        hotReload: false
                     }
                 },
                 {
                     test: /\.tsx?$/,
-                    loader: 'ts-loader',
                     exclude: /node_modules\/(?!@studyportals\/).*/,
-                    options: {
-                        appendTsSuffixTo: [/\.vue$/]
-                    },
+                    use: [
+                        {
+                            loader: 'babel-loader',
+                        },
+                        {
+                            loader: 'ts-loader',
+                            appendTsSuffixTo: [/\.vue$/]
+                        }
+                    ],
                 },
                 {
                     test: /\.js$/,