chore: fix vue examples

Author: Austaras

examples/vue-cssextract/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="panel-container">
+  <div class="panel-container foobar">
     <welcome :exampleName="exampleName" :statusMessage="statusMessage" :logoData="logoData" />
     <clicks />
   </div>
@@ -30,3 +30,9 @@
     }
   }
 </script>
+
+<style scoped>
+.foobar {
+  font-family: monospace
+}
+</style>

examples/vue-cssextract/webpack.config.js

@@ -19,30 +19,19 @@ module.exports = {
       use: BabelMultiTargetPlugin.loader(),
     }, {
       test: /\.vue$/,
-      use: [
-        BabelMultiTargetPlugin.loader('vue-loader'),
-      ],
+      use: BabelMultiTargetPlugin.loader('vue-loader'),
     },
     {
       test: /\.css$/,
       use: [
-        MiniCssExtractPlugin.loader,
+        {
+          loader: MiniCssExtractPlugin.loader,
+          options: {
+            esModule: false,
+          },
+        },
         'css-loader',
       ],
     }],
   },
-
-  node: {
-    // prevent webpack from injecting useless setImmediate polyfill because Vue
-    // source contains it (although only uses it if it's native).
-    setImmediate: false,
-    // prevent webpack from injecting mocks to Node native modules
-    // that does not make sense for the client
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    // eslint-disable-next-line camelcase
-    child_process: 'empty',
-  },
 }

examples/vue-dynamic-import/webpack.config.js

@@ -25,9 +25,7 @@ module.exports = {
       },
       {
         test: /\.vue$/,
-        use: [
-          BabelMultiTargetPlugin.loader('vue-loader'),
-        ],
+        use: BabelMultiTargetPlugin.loader('vue-loader'),
       },
       {
         test: /\.css$/,
@@ -38,18 +36,4 @@ module.exports = {
       },
     ],
   },
-
-  node: {
-    // prevent webpack from injecting useless setImmediate polyfill because Vue
-    // source contains it (although only uses it if it's native).
-    setImmediate: false,
-    // prevent webpack from injecting mocks to Node native modules
-    // that does not make sense for the client
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    // eslint-disable-next-line camelcase
-    child_process: 'empty',
-  },
 }