Merge pull request #14527 from mshima/skip_ci-webpack_needle

Add support to webpack config needle

generators/client/needle-api/needle-client-webpack.js

@@ -23,18 +23,27 @@ const CLIENT_WEBPACK_DIR = constants.CLIENT_WEBPACK_DIR;
 const SUPPORTED_CLIENT_FRAMEWORKS = constants.SUPPORTED_CLIENT_FRAMEWORKS;
 
 module.exports = class extends needleClient {
+  _getWebpackFile() {
+    return this.clientFramework === SUPPORTED_CLIENT_FRAMEWORKS.ANGULAR
+      ? `${CLIENT_WEBPACK_DIR}/webpack.custom.js`
+      : `${CLIENT_WEBPACK_DIR}/webpack.common.js`;
+  }
+
   copyExternalAssets(source, target) {
     const errorMessage = 'Resource path not added to JHipster app.';
-    const webpackDevPath =
-      this.clientFramework === SUPPORTED_CLIENT_FRAMEWORKS.ANGULAR
-        ? `${CLIENT_WEBPACK_DIR}/webpack.custom.js`
-        : `${CLIENT_WEBPACK_DIR}/webpack.common.js`;
     let assetBlock = '';
     if (source && target) {
       assetBlock = `{ from: '${source}', to: '${target}' },`;
     }
-    const rewriteFileModel = this.generateFileModel(webpackDevPath, 'jhipster-needle-add-assets-to-webpack', assetBlock);
+    const rewriteFileModel = this.generateFileModel(this._getWebpackFile(), 'jhipster-needle-add-assets-to-webpack', assetBlock);
 
     this.addBlockContentToFile(rewriteFileModel, errorMessage);
   }
+
+  addWebpackConfig(config) {
+    config = `${config},`;
+    const rewriteFileModel = this.generateFileModel(this._getWebpackFile(), 'jhipster-needle-add-webpack-config', config);
+    rewriteFileModel.prettierAware = true;
+    this.addBlockContentToFile(rewriteFileModel, 'Webpack config not added to JHipster app.\n');
+  }
 };

generators/client/templates/angular/package.json

@@ -40,6 +40,7 @@
     "typescript": "4.1.5",
     "webpack": "4.46.0",
     "webpack-bundle-analyzer": "4.4.0",
+    "webpack-merge": "5.7.3",
     "webpack-notifier": "1.13.0"
   }
 }

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

@@ -131,6 +131,7 @@
     "typescript": "<%= dependabotPackageJson.devDependencies['typescript'] %>",
     "webpack": "<%= dependabotPackageJson.devDependencies['webpack'] %>",
     "webpack-bundle-analyzer": "<%= dependabotPackageJson.devDependencies['webpack-bundle-analyzer'] %>",
+    "webpack-merge": "<%= dependabotPackageJson.devDependencies['webpack-merge'] %>",
     "webpack-notifier": "<%= dependabotPackageJson.devDependencies['webpack-notifier'] %>"
   },
   "engines": {

generators/client/templates/angular/webpack/webpack.custom.js.ejs

@@ -17,6 +17,7 @@
  limitations under the License.
 -%>
 const webpack = require('webpack');
+const { merge } = require('webpack-merge');
 const path = require('path');
 <%_ if (enableTranslation) { _%>
 const MergeJsonWebpackPlugin = require('merge-jsons-webpack-plugin');
@@ -137,5 +138,10 @@ module.exports = (config, options, targetOptions) => {
     <%_ } _%>
   );
 
+  config = merge(
+    // jhipster-needle-add-webpack-config - JHipster will add custom config
+    config
+  );
+
   return config;
 };

generators/client/templates/react/webpack/webpack.common.js.ejs

@@ -18,6 +18,7 @@
 -%>
 const path = require('path');
 const webpack = require('webpack');
+const { merge } = require('webpack-merge');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
@@ -63,7 +64,9 @@ const getTsLoaderRule = env => {
   return rules;
 };
 
-module.exports = options => ({
+module.exports = options => merge(
+// jhipster-needle-add-webpack-config - JHipster will add custom config
+{
   cache: options.env !== 'production',
   resolve: {
     extensions: [

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

@@ -1,5 +1,6 @@
 'use strict';
 const path = require('path');
+const { merge } = require('webpack-merge');
 const { VueLoaderPlugin } = require('vue-loader');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 <%_ if (enableTranslation) { _%>
@@ -11,7 +12,9 @@ function resolve(dir) {
   return path.join(__dirname, '..', dir);
 }
 
-module.exports = {
+module.exports = merge(
+// jhipster-needle-add-webpack-config - JHipster will add custom config
+{
   mode: 'development',
   context: path.resolve(__dirname, '../'),
   entry: {
@@ -116,4 +119,4 @@ module.exports = {
       }
     })<% } %>
   ]
-};
+});

generators/generator-base.js

@@ -927,6 +927,15 @@ module.exports = class JHipsterBaseGenerator extends PrivateBase {
     this.needleApi.clientWebpack.copyExternalAssets(sourceFolder, targetFolder);
   }
 
+  /**
+   * Add webpack config.
+   *
+   * @param {string} config - webpack config to be merged
+   */
+  addWebpackConfig(config) {
+    this.needleApi.clientWebpack.addWebpackConfig(config);
+  }
+
   /**
    * Add a Maven dependency Management.
    *

test/needle-api/needle-client-webpack.spec.js

@@ -43,6 +43,7 @@ const mockBlueprintSubGen = class extends ClientGenerator {
     const customPhaseSteps = {
       webpackPhase() {
         this.copyExternalAssetsInWebpack(assetFrom, assetTo);
+        this.addWebpackConfig('{devServer:{}}');
       },
     };
     return { ...phaseFromJHipster, ...customPhaseSteps };
@@ -85,4 +86,17 @@ describe('needle API Webpack: JHipster client generator with blueprint', () => {
     await generateAppWithClientFramework(VUE);
     assert.fileContent(`${CLIENT_WEBPACK_DIR}webpack.common.js`, `{ from: '${assetFrom}', to: '${assetTo}' },`);
   });
+
+  it('should add webpack config to webpack.custom.js if framework is Angular', async () => {
+    await generateAppWithClientFramework(ANGULAR);
+    assert.fileContent(`${CLIENT_WEBPACK_DIR}webpack.custom.js`, '{ devServer: {} },');
+  });
+  it('should add webpack config to webpack.common.js if framework is React', async () => {
+    await generateAppWithClientFramework(REACT);
+    assert.fileContent(`${CLIENT_WEBPACK_DIR}webpack.common.js`, '{ devServer: {} },');
+  });
+  it('should add webpack config to webpack.common.js if framework is Vue', async () => {
+    await generateAppWithClientFramework(VUE);
+    assert.fileContent(`${CLIENT_WEBPACK_DIR}webpack.common.js`, '{ devServer: {} },');
+  });
 });