@studyportals/webpack-helper 3.0.0-beta.1 → 3.0.0-beta.13

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 (7) hide show
  1. package/README.md +50 -1
  2. package/package.json +9 -9
  3. package/src/defaults/production.config.js +3 -3
  4. package/src/model/configuration.js +6 -6
  5. package/src/model/output.js +1 -1
  6. package/src/presets/typescript.preset.js +1 -1
  7. package/src/presets/vue-typescript.preset.js +2 -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": "3.0.0-beta.1",
3
+ "version": "3.0.0-beta.13",
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.5",
32
32
  "@studyportals/browserslist-config": "^1.2.0",
33
- "@studyportals/dll-availability-tracker": "^1.0.2",
34
- "@studyportals/vue-config": "4.0.0-beta.1",
33
+ "@studyportals/dll-availability-tracker": "^2.0.0-beta.1",
34
+ "@studyportals/vue-config": "4.0.0-beta.5",
35
35
  "babel-loader": "^8.2.3",
36
36
  "css-loader": "^6.5.1",
37
37
  "file-loader": "^6.2.0",
38
- "mini-css-extract-plugin": "^2.4.5",
39
- "node-sass": "^7.0.1",
38
+ "mini-css-extract-plugin": "^2.5.3",
40
39
  "optimize-css-assets-webpack-plugin": "^5.0.8",
41
40
  "path": "^0.12.7",
41
+ "sass": "^1.49.7",
42
42
  "sass-loader": "^12.4.0",
43
- "terser-webpack-plugin": "^5.3.0",
43
+ "terser-webpack-plugin": "^5.3.1",
44
44
  "ts-loader": "^9.2.6",
45
45
  "typescript": "^3.7.2",
46
46
  "vue-loader": "^16.2.0",
47
- "webpack": "^5.65.0",
47
+ "webpack": "^5.68.0",
48
48
  "webpack-cli": "^4.9.1",
49
49
  "webpack-merge": "^5.8.0"
50
50
  },
51
51
  "devDependencies": {
52
52
  "@types/jest": "^27.4.0",
53
- "@types/node": "^17.0.8",
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/production.config.js CHANGED
@@ -38,10 +38,9 @@ exports.ProductionConfig = (bobConfig) => {
38
38
  optimization: {
39
39
  minimize: true,
40
40
  minimizer: [
41
- (compiler) => {
41
+ compiler => {
42
42
  const TerserPlugin = require('terser-webpack-plugin');
43
43
  new TerserPlugin({
44
- sourceMap: true,
45
44
  parallel: true,
46
45
  extractComments: false,
47
46
  terserOptions: {
@@ -51,7 +50,8 @@ exports.ProductionConfig = (bobConfig) => {
51
50
  compress: {
52
51
  drop_console: true,
53
52
  passes: 5
54
- }
53
+ },
54
+ sourceMap: true
55
55
  }
56
56
  }).apply(compiler);
57
57
  }
package/src/model/configuration.js CHANGED
@@ -26,15 +26,15 @@ class Configuration {
26
26
  this.plugins = new plugins_1.Plugins(options.plugins);
27
27
  this.module = new module_1.Module(options.module);
28
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] : {};
29
31
  this.environmentSpecificConfig = {
30
- [mode_1.Mode.DEVELOPMENT]: merge([options[mode_1.Mode.DEVELOPMENT], development_config_1.DevelopmentConfig]) || development_config_1.DevelopmentConfig,
31
- [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)
32
34
  };
33
35
  this.detectPresets();
34
36
  }
35
37
  get(mode) {
36
- let adjustedMode = mode;
37
- adjustedMode = adjustedMode.WEBPACK_SERVE ? "development" : "production";
38
38
  return merge({
39
39
  entry: this.entry.getEntry(),
40
40
  output: this.output.getOutput(),
@@ -50,7 +50,7 @@ class Configuration {
50
50
  minimize: false
51
51
  },
52
52
  devtool: 'source-map'
53
- }, this.getBobConfig(), this.commonConfig, this.getEnvironmentSpecificConfig(adjustedMode), { mode: adjustedMode });
53
+ }, this.getBobConfig(), this.commonConfig, this.getEnvironmentSpecificConfig(mode), { mode });
54
54
  }
55
55
  detectPresets() {
56
56
  switch (this.preset) {
@@ -113,7 +113,7 @@ class Configuration {
113
113
  && this.hash.css === false) {
114
114
  return 'style.css';
115
115
  }
116
- return 'style.[hash].css';
116
+ return 'style.[fullhash].css';
117
117
  }
118
118
  }
119
119
  exports.Configuration = Configuration;
package/src/model/output.js CHANGED
@@ -27,7 +27,7 @@ class Output {
27
27
  return output;
28
28
  }
29
29
  getFileName() {
30
- 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`;
31
31
  return fileName;
32
32
  }
33
33
  shouldAddHash(hashConfig) {
package/src/presets/typescript.preset.js CHANGED
@@ -42,7 +42,7 @@ class TypeScriptPreset {
42
42
  test: /\.(png|jpg|gif|svg)$/,
43
43
  loader: 'file-loader',
44
44
  options: {
45
- name: '[name].[ext]?[hash]'
45
+ name: '[name].[ext]?[fullhash]'
46
46
  }
47
47
  }
48
48
  ]
package/src/presets/vue-typescript.preset.js CHANGED
@@ -8,7 +8,7 @@ class VueTypeScriptPreset {
8
8
  getPlugins(filename) {
9
9
  return [
10
10
  new webpack.DllReferencePlugin({
11
- manifest: require("@studyportals/vue-config/dist/library.json")
11
+ manifest: require("@studyportals/vue-config/dist/vue3_library.json")
12
12
  }),
13
13
  new MiniCssExtractPlugin({
14
14
  filename
@@ -64,7 +64,7 @@ class VueTypeScriptPreset {
64
64
  test: /\.(png|jpg|gif|svg)$/,
65
65
  loader: 'file-loader',
66
66
  options: {
67
- name: '[name].[ext]?[hash]'
67
+ name: '[name].[ext]?[fullhash]'
68
68
  }
69
69
  },
70
70
  ]