Cleanup to webpack for mods and misc

hollyschinsky · hollyschinsky · commit 1dd00329257c · 2025-04-09T12:54:12.000-04:00
diff --git a/contributed/vue-starter/src/App.vue b/contributed/vue-starter/src/App.vue
@@ -3,6 +3,11 @@
     This is the template section where we define the HTML structure of our component.
     In Vue, we use a single-file component (SFC) approach that combines template, logic, and styles.
   -->
+    <!-- 
+            Please note that this document does not use the spectrum web components theme for Express.
+            You may use "addOnUISdk.app.ui.theme" to get the current theme and style accordingly.
+        -->
+        
   <div class="container">
     <!-- 
       Vue directives start with ':' or 'v-' and provide special functionality:
diff --git a/contributed/vue-starter/src/index.html b/contributed/vue-starter/src/index.html
@@ -7,12 +7,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Get Started with Vue</title>
     </head>
-    <body>
-        <!-- 
-            Please note that this document does not use the spectrum web components theme for Express.
-            You may use "addOnUISdk.app.ui.theme" to get the current theme and style accordingly.
-        -->
-        
+    <body>        
         <!-- 
             This is the mounting point for our Vue application.
             The <div id="app"></div> element is where Vue will render everything.
diff --git a/contributed/vue-starter/webpack.config.js b/contributed/vue-starter/webpack.config.js
@@ -16,7 +16,14 @@ export default (env, argv) => {
         output: {
             filename: "index.js",
             path: path.resolve(__dirname, "dist"),
-            clean: true
+            clean: true,
+            module: true,
+            library: {
+                type: 'module'
+            },
+            environment: {
+                module: true
+            }
         },        
         externalsType: "module",
         experiments: {
@@ -34,7 +41,11 @@ export default (env, argv) => {
                     use: {
                         loader: 'babel-loader',
                         options: {
-                            presets: ['@babel/preset-env']
+                            presets: [
+                                ['@babel/preset-env', {
+                                    modules: false
+                                }]
+                            ]
                         }
                     }
                 },
@@ -48,7 +59,8 @@ export default (env, argv) => {
             new VueLoaderPlugin(),
             new HtmlWebpackPlugin({
                 template: './src/index.html',
-                inject: true
+                inject: 'head',
+                scriptLoading: 'module'
             }),
             new CopyWebpackPlugin({
                 patterns: [
@@ -62,7 +74,7 @@ export default (env, argv) => {
         resolve: {
             extensions: ['.js', '.vue', '.json'],
             alias: {
-                'vue': '@vue/runtime-dom'
+                'vue': 'vue/dist/vue.esm-browser.js'
             }
         },
         devServer: {
