vue-cli

Author: mshima

generators/vue/generator.mjs

@@ -129,7 +129,7 @@ export default class VueGenerator extends BaseApplicationGenerator {
     return this.asPostWritingTaskGroup({
       microfrontend({ application }) {
         if (!application.microfrontend) return;
-        this.addWebpackConfig("require('./webpack.microfrontend')({ serve: options.env.WEBPACK_SERVE })", application.clientFramework);
+        this.addWebpackConfig("require('./webpack.microfrontend')(options)", application.clientFramework);
       },
     });
   }

generators/vue/templates/vue.commands.js.ejs

@@ -21,36 +21,21 @@ const commonWebpack = require('./webpack/webpack.common');
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const devWebpack = require('./webpack/webpack.dev');
 
-const configureWebpack = {
-  resolve: {
-    alias: {
-      vue$: 'vue/dist/vue.esm.js',
-      '@': __dirname + '/<%= clientSrcDir %>app',
-    },
-  },
-  entry: {
-    global: './<%= clientSrcDir %>content/scss/global.scss',
-    app: './<%= clientSrcDir %>app/main.ts',
-  },
-};
-
 module.exports = (api, options) => {
   api.service.commands['build:original'] = api.service.commands.build;
   api.service.commands['serve:original'] = api.service.commands.serve;
 
   api.registerCommand('build', async (args, rawArgs) => {
     // Force extract for development mode, otherwise css assets are not emitted.
     options.css.extract = true;
-    const webpackConfig = await commonWebpack(api.service);
+    const webpackConfig = await commonWebpack(api.service, {});
     api.configureWebpack(webpackConfig);
-    api.configureWebpack(configureWebpack);
     await api.service.run('build:original', args, rawArgs);
   });
   api.registerCommand('serve', async (args, rawArgs) => {
-    const webpackConfig = await commonWebpack(api.service);
+    const webpackConfig = await commonWebpack(api.service, { serve: true });
     api.configureWebpack(webpackConfig);
     api.configureWebpack(devWebpack);
-    api.configureWebpack(configureWebpack);
     await api.service.run('serve:original', args, rawArgs);
   });
 };

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

@@ -29,7 +29,7 @@ function resolve(dir = '') {
   return path.join(__dirname, '..', dir);
 }
 
-module.exports = async configuration => {
+module.exports = async (configuration, options) => {
 <%_ if (enableTranslation) { _%>
   const languagesHash = await hashElement(resolve('<%= clientSrcDir %>i18n'), {
     algo: 'md5',
@@ -54,6 +54,16 @@ module.exports = async configuration => {
 
   return merge(
     {
+      resolve: {
+        alias: {
+          vue$: 'vue/dist/vue.esm.js',
+          '@': resolve('/<%= clientSrcDir %>app'),
+        },
+      },
+      entry: {
+        global: './<%= clientSrcDir %>content/scss/global.scss',
+        app: './<%= clientSrcDir %>app/main.ts',
+      },
 <%_ if (applicationTypeGateway && microfrontend) { _%>
       experiments: {
         topLevelAwait: true,