@studyportals/webpack-helper 2.4.4-beta.0 → 3.0.0-beta.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +50 -1
  2. package/package.json +18 -18
  3. package/src/defaults/development.config.js +1 -0
  4. package/src/defaults/production.config.js +18 -15
  5. package/src/enums/mode.js +1 -0
  6. package/src/enums/preset.js +1 -0
  7. package/src/factories/configuration-factory.js +1 -0
  8. package/src/model/configuration.js +7 -4
  9. package/src/model/entry.js +1 -0
  10. package/src/model/module.js +2 -1
  11. package/src/model/output.js +2 -1
  12. package/src/model/plugins.js +1 -0
  13. package/src/presets/javascript.preset.js +1 -0
  14. package/src/presets/typescript.preset.js +2 -1
  15. package/src/presets/vue-typescript.preset.js +3 -2
package/README.md CHANGED
@@ -3,6 +3,8 @@
3
3
  WebpackHelper is a utility that makes it easy to set up a webpack configuration for Studyportals' projects that adhere to our [Webpack quality criteria](https://knowledge-vault.studyportals.xyz/quality-standards/front-end/webpack-quality-criteria.html).
4
4
 
5
5
  ## Table of Contents
6
+ - [Webpack version](#webpack-version)
7
+ - [Notes on updating Webpack from v4 to v5](#notes-on-updating-webpack-from-v4-to-v5)
6
8
  - [Quick Start](#quick-start)
7
9
  - [Configuration](#configuration)
8
10
  - [entry](#entry-required)
@@ -18,6 +20,53 @@ WebpackHelper is a utility that makes it easy to set up a webpack configuration
18
20
  - [vue-typescript](#vue-typescript)
19
21
  - [DoD compliance with Babel and Browserslist](#dod-compliance-with-babel-and-browserslist)
20
22
 
23
+ ## Webpack version
24
+ 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/).
25
+
26
+ ### Notes on updating Webpack from v4 to v5
27
+ 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).
28
+
29
+ #### Dev server
30
+ Webpack-helper **v2 and below**: Your `development.devServer` file might include these parts:
31
+ ```javascript
32
+ {
33
+ development: {
34
+ devServer: {
35
+ open: true,
36
+ overlay: true,
37
+ writeToDisk: true
38
+ }
39
+ }
40
+ }
41
+ ```
42
+ Webpack-helper **v3 and beyond**: Your `webpack.config.js` file should configure those parts like this:
43
+ ```javascript
44
+ {
45
+ development: {
46
+ devServer: {
47
+ client: {
48
+ overlay: true
49
+ },
50
+ devMiddleware: {
51
+ writeToDisk: true
52
+ },
53
+ open: true,
54
+ static: path.join(__dirname, '.') // Related to writeToDisk.
55
+ }
56
+ }
57
+ }
58
+ ```
59
+
60
+ #### Exporting
61
+ Webpack-helper **v2 and below**: Your `webpack.config.js` file ended with the following:
62
+ ```javascript
63
+ module.exports = mode => configuration.get(mode);
64
+ ```
65
+ Webpack-helper **v3 and beyond**: Your `webpack.config.js` file should end with the following (as is also mentioned further below):
66
+ ```javascript
67
+ module.exports = (env, details) => configuration.get(details.mode);
68
+ ```
69
+
21
70
  ## Quick Start
22
71
 
23
72
  ```bash
@@ -72,7 +121,7 @@ const configuration = WebpackHelper.create({
72
121
  When your configuration is created you can get an instance of it for the correct environment and export it for webpack to use like so:
73
122
 
74
123
  ```javascript
75
- module.exports = mode => configuration.get(mode);
124
+ module.exports = (env, details) => configuration.get(details.mode);
76
125
  ```
77
126
  ## Configuration
78
127
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@studyportals/webpack-helper",
3
- "version": "2.4.4-beta.0",
3
+ "version": "3.0.0-beta.11",
4
4
  "description": "A collection of standard configurations and helpers for webpack.",
5
5
  "main": "src/main.js",
6
6
  "scripts": {
@@ -28,29 +28,29 @@
28
28
  "@babel/preset-env": "^7.5.5",
29
29
  "@babel/preset-typescript": "^7.3.3",
30
30
  "@babel/runtime": "^7.5.5",
31
- "@studyportals/bob-manifest-generator": "^2.3.1",
31
+ "@studyportals/bob-manifest-generator": "^3.0.0-beta.2",
32
32
  "@studyportals/browserslist-config": "^1.2.0",
33
33
  "@studyportals/dll-availability-tracker": "^1.0.2",
34
- "@studyportals/vue-config": "^3.0.1-beta.1",
35
- "babel-loader": "^8.0.6",
36
- "css-loader": "^3.4.2",
37
- "file-loader": "^6.0.0",
38
- "mini-css-extract-plugin": "^0.9.0",
39
- "node-sass": "^4.13.1",
40
- "optimize-css-assets-webpack-plugin": "^5.0.3",
34
+ "@studyportals/vue-config": "4.0.0-beta.5",
35
+ "babel-loader": "^8.2.3",
36
+ "css-loader": "^6.5.1",
37
+ "file-loader": "^6.2.0",
38
+ "mini-css-extract-plugin": "^2.5.3",
39
+ "optimize-css-assets-webpack-plugin": "^5.0.8",
41
40
  "path": "^0.12.7",
42
- "sass-loader": "^8.0.2",
43
- "terser-webpack-plugin": "^2.3.4",
44
- "ts-loader": "^6.2.1",
41
+ "sass": "^1.49.7",
42
+ "sass-loader": "^12.4.0",
43
+ "terser-webpack-plugin": "^5.3.1",
44
+ "ts-loader": "^9.2.6",
45
45
  "typescript": "^3.7.2",
46
- "vue-loader": "^15.8.3",
47
- "vue-template-compiler": "2.5.16",
48
- "webpack": "^4.41.2",
49
- "webpack-cli": "^3.3.10",
50
- "webpack-merge": "^4.2.2"
46
+ "vue-loader": "^16.2.0",
47
+ "webpack": "^5.68.0",
48
+ "webpack-cli": "^4.9.1",
49
+ "webpack-merge": "^5.8.0"
51
50
  },
52
51
  "devDependencies": {
53
- "@types/node": "^12.12.30",
52
+ "@types/jest": "^27.4.0",
53
+ "@types/node": "^17.0.14",
54
54
  "babel-jest": "^25.1.0",
55
55
  "jest": "^25.1.0",
56
56
  "ts-jest": "^25.2.1"
package/src/defaults/development.config.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.DevelopmentConfig = void 0;
3
4
  exports.DevelopmentConfig = {
4
5
  optimization: {
5
6
  minimize: false
package/src/defaults/production.config.js CHANGED
@@ -1,12 +1,12 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.ProductionConfig = void 0;
3
4
  const webpack = require('webpack');
4
- const TerserPlugin = require('terser-webpack-plugin');
5
5
  const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
6
6
  const DllAvailabilityTracker = require('@studyportals/dll-availability-tracker');
7
7
  exports.ProductionConfig = (bobConfig) => {
8
8
  let dllDependencies = ['library'];
9
- if (bobConfig !== null && bobConfig.hasOwnProperty('dllPackages')) {
9
+ if (bobConfig && bobConfig.hasOwnProperty('dllPackages')) {
10
10
  bobConfig.dllPackages.forEach((dependency) => dllDependencies.push(dependency.manifest.name));
11
11
  }
12
12
  return {
@@ -38,20 +38,23 @@ exports.ProductionConfig = (bobConfig) => {
38
38
  optimization: {
39
39
  minimize: true,
40
40
  minimizer: [
41
- new TerserPlugin({
42
- sourceMap: true,
43
- parallel: true,
44
- extractComments: false,
45
- terserOptions: {
46
- output: {
47
- comments: false
48
- },
49
- compress: {
50
- drop_console: true,
51
- passes: 5
41
+ compiler => {
42
+ const TerserPlugin = require('terser-webpack-plugin');
43
+ new TerserPlugin({
44
+ parallel: true,
45
+ extractComments: false,
46
+ terserOptions: {
47
+ output: {
48
+ comments: false
49
+ },
50
+ compress: {
51
+ drop_console: true,
52
+ passes: 5
53
+ },
54
+ sourceMap: true
52
55
  }
53
- }
54
- })
56
+ }).apply(compiler);
57
+ }
55
58
  ]
56
59
  }
57
60
  };
package/src/enums/mode.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Mode = void 0;
3
4
  var Mode;
4
5
  (function (Mode) {
5
6
  Mode["DEVELOPMENT"] = "development";
package/src/enums/preset.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Preset = void 0;
3
4
  var Preset;
4
5
  (function (Preset) {
5
6
  Preset["VUE_TYPESCRIPT"] = "vue-typescript";
package/src/factories/configuration-factory.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.ConfigurationFactory = void 0;
3
4
  const configuration_1 = require("../model/configuration");
4
5
  class ConfigurationFactory {
5
6
  create(options) {
package/src/model/configuration.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Configuration = void 0;
3
4
  const entry_1 = require("./entry");
4
5
  const output_1 = require("./output");
5
6
  const plugins_1 = require("./plugins");
@@ -13,7 +14,7 @@ const production_config_1 = require("../defaults/production.config");
13
14
  const development_config_1 = require("../defaults/development.config");
14
15
  const ManifestGenerator = require("@studyportals/bob-manifest-generator").ManifestGenerator;
15
16
  const DllReferencePlugin = require("@studyportals/bob-manifest-generator").DllReferencePlugin;
16
- const merge = require("webpack-merge");
17
+ const { merge } = require('webpack-merge');
17
18
  class Configuration {
18
19
  constructor(options) {
19
20
  this.bob = options.bob || null;
@@ -25,9 +26,11 @@ class Configuration {
25
26
  this.plugins = new plugins_1.Plugins(options.plugins);
26
27
  this.module = new module_1.Module(options.module);
27
28
  this.commonConfig = options.common || {};
29
+ const configDev = options[mode_1.Mode.DEVELOPMENT] ? options[mode_1.Mode.DEVELOPMENT] : {};
30
+ const configPrd = options[mode_1.Mode.PRODUCTION] ? options[mode_1.Mode.PRODUCTION] : {};
28
31
  this.environmentSpecificConfig = {
29
- [mode_1.Mode.DEVELOPMENT]: merge([options[mode_1.Mode.DEVELOPMENT], development_config_1.DevelopmentConfig]) || development_config_1.DevelopmentConfig,
30
- [mode_1.Mode.PRODUCTION]: merge([options[mode_1.Mode.PRODUCTION], production_config_1.ProductionConfig(this.bob)]) || production_config_1.ProductionConfig(this.bob)
32
+ [mode_1.Mode.DEVELOPMENT]: merge([configDev, development_config_1.DevelopmentConfig]) || development_config_1.DevelopmentConfig,
33
+ [mode_1.Mode.PRODUCTION]: merge([configPrd, production_config_1.ProductionConfig(this.bob)]) || production_config_1.ProductionConfig(this.bob)
31
34
  };
32
35
  this.detectPresets();
33
36
  }
@@ -110,7 +113,7 @@ class Configuration {
110
113
  && this.hash.css === false) {
111
114
  return 'style.css';
112
115
  }
113
- return 'style.[hash].css';
116
+ return 'style.[fullhash].css';
114
117
  }
115
118
  }
116
119
  exports.Configuration = Configuration;
package/src/model/entry.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Entry = void 0;
3
4
  class Entry {
4
5
  constructor(entry) {
5
6
  this.entry = entry;
package/src/model/module.js CHANGED
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- const merge = require("webpack-merge");
3
+ exports.Module = void 0;
4
+ const { merge } = require('webpack-merge');
4
5
  class Module {
5
6
  constructor(module = {}) {
6
7
  this.module = {};
package/src/model/output.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Output = void 0;
3
4
  class Output {
4
5
  constructor(outputConfig) {
5
6
  this.path = outputConfig.path;
@@ -26,7 +27,7 @@ class Output {
26
27
  return output;
27
28
  }
28
29
  getFileName() {
29
- let fileName = this.addHash === true ? `${this.fileName}.[hash].js` : `${this.fileName}.js`;
30
+ let fileName = this.addHash === true ? `${this.fileName}.[fullhash].js` : `${this.fileName}.js`;
30
31
  return fileName;
31
32
  }
32
33
  shouldAddHash(hashConfig) {
package/src/model/plugins.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.Plugins = void 0;
3
4
  class Plugins {
4
5
  constructor(plugins = []) {
5
6
  this.plugins = [];
package/src/presets/javascript.preset.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.JavascriptPreset = void 0;
3
4
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
4
5
  class JavascriptPreset {
5
6
  getPlugins(filename) {
package/src/presets/typescript.preset.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.TypeScriptPreset = void 0;
3
4
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
4
5
  class TypeScriptPreset {
5
6
  getPlugins(filename) {
@@ -41,7 +42,7 @@ class TypeScriptPreset {
41
42
  test: /\.(png|jpg|gif|svg)$/,
42
43
  loader: 'file-loader',
43
44
  options: {
44
- name: '[name].[ext]?[hash]'
45
+ name: '[name].[ext]?[fullhash]'
45
46
  }
46
47
  }
47
48
  ]
package/src/presets/vue-typescript.preset.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.VueTypeScriptPreset = void 0;
3
4
  const webpack = require("webpack");
4
5
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
5
6
  const VueLoaderPlugin = require('vue-loader').VueLoaderPlugin;
@@ -7,7 +8,7 @@ class VueTypeScriptPreset {
7
8
  getPlugins(filename) {
8
9
  return [
9
10
  new webpack.DllReferencePlugin({
10
- manifest: require("@studyportals/vue-config/dist/library.json")
11
+ manifest: require("@studyportals/vue-config/dist/vue3_library.json")
11
12
  }),
12
13
  new MiniCssExtractPlugin({
13
14
  filename
@@ -63,7 +64,7 @@ class VueTypeScriptPreset {
63
64
  test: /\.(png|jpg|gif|svg)$/,
64
65
  loader: 'file-loader',
65
66
  options: {
66
- name: '[name].[ext]?[hash]'
67
+ name: '[name].[ext]?[fullhash]'
67
68
  }
68
69
  },
69
70
  ]