Merge pull request #16622 from mshima/skip_ci-vue_webpack

Cleanup vue webpack config.

generators/client/files-vue.js

@@ -25,6 +25,7 @@ const { GATEWAY } = require('../../jdl/jhipster/application-types');
 const { CLIENT_MAIN_SRC_DIR, CLIENT_TEST_SRC_DIR, VUE_DIR } = constants;
 
 module.exports = {
+  cleanup,
   writeFiles,
   customizeFiles,
 };
@@ -37,15 +38,11 @@ const vueFiles = {
         'tsconfig.json',
         '.postcssrc.js',
         '.eslintrc.js',
-        'webpack/env.js',
-        'webpack/dev.env.js',
-        'webpack/prod.env.js',
+        'webpack/config.js',
         'webpack/webpack.common.js',
         'webpack/webpack.dev.js',
         'webpack/webpack.prod.js',
         'webpack/vue.utils.js',
-        'webpack/loader.conf.js',
-        'webpack/utils.js',
       ],
     },
     {
@@ -323,6 +320,18 @@ const vueFiles = {
   ],
 };
 
+function cleanup() {
+  if (!this.clientFrameworkVue) return;
+
+  if (this.isJhipsterVersionLessThan('7.3.1')) {
+    this.removeFile('webpack/env.js');
+    this.removeFile('webpack/dev.env.js');
+    this.removeFile('webpack/prod.env.js');
+    this.removeFile('webpack/utils.js');
+    this.removeFile('webpack/loader.conf.js');
+  }
+}
+
 function writeFiles() {
   // write Vue files
   return this.writeFilesToDisk(vueFiles, 'vue');

generators/client/index.js

@@ -23,7 +23,7 @@ const BaseBlueprintGenerator = require('../generator-base-blueprint');
 const prompts = require('./prompts');
 const writeAngularFiles = require('./files-angular').writeFiles;
 const writeReactFiles = require('./files-react').writeFiles;
-const { writeFiles: writeVueFiles, customizeFiles: customizeVueFiles } = require('./files-vue');
+const { cleanup: cleanupVue, writeFiles: writeVueFiles, customizeFiles: customizeVueFiles } = require('./files-vue');
 const writeCommonFiles = require('./files-common').writeFiles;
 const { clientI18nFiles } = require('../languages/files');
 
@@ -321,6 +321,8 @@ module.exports = class JHipsterClientGenerator extends BaseBlueprintGenerator {
   // Public API method used by the getter and also by Blueprints
   _writing() {
     return {
+      cleanupVue,
+
       write() {
         if (this.skipClient) return;
         switch (this.clientFramework) {

generators/client/templates/vue/package.json

@@ -51,9 +51,7 @@
     "jest-vue-preprocessor": "1.7.1",
     "merge-jsons-webpack-plugin": "1.0.21",
     "mini-css-extract-plugin": "2.4.2",
-    "node-notifier": "9.0.1",
     "numeral": "2.0.6",
-    "portfinder": "1.0.28",
     "postcss": "8.3.9",
     "postcss-import": "14.0.2",
     "postcss-loader": "6.1.1",

generators/client/templates/vue/package.json.ejs

@@ -105,9 +105,7 @@
     "merge-jsons-webpack-plugin": "<%= dependabotPackageJson.devDependencies['merge-jsons-webpack-plugin'] %>",
 <%_ } _%>
     "mini-css-extract-plugin": "<%= dependabotPackageJson.devDependencies['mini-css-extract-plugin'] %>",
-    "node-notifier": "<%= dependabotPackageJson.devDependencies['node-notifier'] %>",
     "numeral": "<%= dependabotPackageJson.devDependencies['numeral'] %>",
-    "portfinder": "<%= dependabotPackageJson.devDependencies['portfinder'] %>",
     "postcss": "<%= dependabotPackageJson.devDependencies['postcss'] %>",
     "postcss-import": "<%= dependabotPackageJson.devDependencies['postcss-import'] %>",
     "postcss-loader": "<%= dependabotPackageJson.devDependencies['postcss-loader'] %>",
@@ -187,13 +185,13 @@
     "test-ci": "<%= clientPackageManager %> run lint && <%= clientPackageManager %> run jest:update --",
     "test:watch": "<%= clientPackageManager %> run jest -- --watch",
     "webapp:build": "<%= clientPackageManager %> run clean-www && <%= clientPackageManager %> run webapp:build:dev --",
-    "webapp:build:dev": "<%= clientPackageManager %> run webpack -- --config webpack/webpack.dev.js --progress=profile --env stats=minimal",
-    "webapp:build:prod": "<%= clientPackageManager %> run webpack -- --config webpack/webpack.prod.js --progress=profile --env stats=minimal",
-    "webapp:dev": "<%= clientPackageManager %> run webpack-dev-server -- --config webpack/webpack.dev.js --progress=profile --env stats=normal",
+    "webapp:build:dev": "<%= clientPackageManager %> run webpack -- --mode development --progress=profile --env stats=minimal",
+    "webapp:build:prod": "<%= clientPackageManager %> run webpack -- --mode production --progress=profile --env stats=minimal",
+    "webapp:dev": "<%= clientPackageManager %> run webpack-dev-server -- --mode development --progress=profile --env stats=normal",
     "webapp:prod": "<%= clientPackageManager %> run clean-www && <%= clientPackageManager %> run webapp:build:prod --",
     "webapp:test": "<%= clientPackageManager %> run test --",
-    "webpack-dev-server": "webpack serve",
-    "webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js"
+    "webpack-dev-server": "webpack serve --config webpack/webpack.common.js",
+    "webpack": "webpack --config webpack/webpack.common.js"
   },
   "jestSonar": {
     "reportPath": "<%= BUILD_DIR %>test-results/jest",

generators/client/templates/vue/src/main/webapp/app/constants.ts.ejs

@@ -1,11 +1,21 @@
-// These constants are injected via webpack environment variables.
-// You can add more variables in webpack.common.js or in profile specific webpack.<dev|prod>.js files.
-// If you change the values in the webpack config files, you need to re run webpack to update the application
+<%#
+ Copyright 2013-2021 the original author or authors from the JHipster project.
 
-export const VERSION = process.env.VERSION;
-// export const DEBUG_INFO_ENABLED: boolean = !!process.env.DEBUG_INFO_ENABLED;
-export const SERVER_API_URL = process.env.SERVER_API_URL;
+ This file is part of the JHipster project, see https://www.jhipster.tech/
+ for more information.
 
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-%>
 // Errors
 export const PROBLEM_BASE_URL = 'https://www.jhipster.tech/problem';
 export const EMAIL_ALREADY_USED_TYPE = `${PROBLEM_BASE_URL}/email-already-used`;

generators/client/templates/vue/src/main/webapp/app/core/jhi-navbar/jhi-navbar.component.ts.ejs

@@ -1,5 +1,4 @@
 import { Component, Inject, Vue } from 'vue-property-decorator';
-import { VERSION } from '@/constants';
 import LoginService from '@/account/login.service';
 import AccountService from '@/account/account.service';
 <%_ if (enableTranslation) { _%>
@@ -14,7 +13,7 @@ export default class JhiNavbar extends Vue {
   @Inject('translationService') private translationService: () => TranslationService;
 <%_ } %>
   @Inject('accountService') private accountService: () => AccountService;
-  public version = VERSION ? 'v' + VERSION : '';
+  public version = 'v' + VERSION;
   private currentLanguage = this.$store.getters.currentLanguage;
   private languages: any = this.$store.getters.languages;
   private hasAnyAuthorityValue = false;

generators/client/templates/vue/src/main/webapp/app/shared/config/axios-interceptor.ts.ejs

@@ -18,8 +18,6 @@
 -%>
 import axios from 'axios';
 
-import {SERVER_API_URL} from "@/constants";
-
 const TIMEOUT = 1000000;
 const onRequestSuccess = config => {
 <%_ if (authenticationTypeJwt) { _%>

generators/client/templates/vue/src/main/webapp/app/shims-vue.d.ts.ejs

@@ -1,7 +1,31 @@
+<%#
+ Copyright 2013-2021 the original author or authors from the JHipster project.
+
+ This file is part of the JHipster project, see https://www.jhipster.tech/
+ for more information.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-%>
+// These constants are injected via webpack environment variables.
+// You can add more variables in webpack.common.js or in profile specific webpack.<dev|prod>.js files.
+// If you change the values in the webpack config files, you need to re run webpack to update the application
+
+declare const SERVER_API_URL: string;
+declare const VERSION: string;
 <%_ if (enableTranslation) { _%>
 declare const I18N_HASH: string;
-
 <%_ } _%>
+
 declare module '*.vue' {
   import Vue from 'vue';
   export default Vue;

generators/client/templates/vue/src/test/javascript/jest.conf.js.ejs

@@ -1,3 +1,5 @@
+const config = require('../../../webpack/config');
+
 module.exports = {
   testEnvironment: 'jsdom',
   coverageDirectory: '<rootDir>/<%= BUILD_DIR %>test-results/',
@@ -18,11 +20,13 @@ module.exports = {
   testMatch: ['<rootDir>/<%= CLIENT_TEST_SRC_DIR %>spec/**/@(*.)@(spec.ts)'],
   snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
   rootDir: '../../../',
-<%_ if (enableTranslation) { _%>
   globals: {
+<%_ if (enableTranslation) { _%>
     I18N_HASH: 'generated_hash',
-  },
 <%_ } _%>
+    SERVER_API_URL: config.serverApiUrl,
+    VERSION: config.version,
+  },
   coverageThreshold: {
     global: {
       statements: 80,

generators/client/templates/vue/src/test/javascript/spec/app/shared/config/axios-interceptor.spec.ts.ejs

@@ -1,5 +1,4 @@
 import * as setupAxiosConfig from '@/shared/config/axios-interceptor';
-import { SERVER_API_URL } from '@/constants';
 import * as sinon from 'sinon';
 import axios from 'axios';
 import MockAdapter from "axios-mock-adapter";

generators/client/templates/vue/webpack/config.js.ejs

@@ -0,0 +1,48 @@
+'use strict';
+
+const path = require('path');
+
+<%_ if (buildToolUnknown) { _%>
+const packageJson = require('./../package.json');
+<%_ } _%>
+
+module.exports = {
+  serverApiUrl: '',
+<%_ if (buildToolUnknown) { _%>
+  version: packageJson.version,
+<%_ } else { _%>
+  // APP_VERSION is passed as an environment variable from the Gradle / Maven build tasks.
+  version: process.env.hasOwnProperty('APP_VERSION') ? process.env.APP_VERSION : 'UNKNOWN',
+<%_ } _%>
+
+  dev: {
+    // https://webpack.js.org/configuration/devtool/#development
+    devtool: 'cheap-module-source-map',
+
+    // If you have problems debugging vue-files in devtools,
+    // set this to false - it *may* help
+    // https://vue-loader.vuejs.org/en/options.html#cachebusting
+    cacheBusting: true,
+
+    cssSourceMap: true
+  },
+
+  build: {
+    productionSourceMap: true,
+    // https://webpack.js.org/configuration/devtool/#production
+    devtool: 'source-map',
+
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  }
+};