Adding webpack externals example (#5)

Joel Denning · web-flow · commit 149ae7faf45e · 2019-12-14T11:30:47.000+02:00
* Adding webpack externals example

* Self review

* Updating directory structure and example

* Moving to loading-dependencies folder
diff --git a/loading-dependencies/webpack-externals/dist/bundle.js b/loading-dependencies/webpack-externals/dist/bundle.js
diff --git a/loading-dependencies/webpack-externals/dist/bundle.js.map b/loading-dependencies/webpack-externals/dist/bundle.js.map
diff --git a/loading-dependencies/webpack-externals/index.html b/loading-dependencies/webpack-externals/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Webpack Externals - SystemJS Example</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <base href="/loading-dependencies/webpack-externals/">
+  <script type="systemjs-importmap">
+    {
+      "imports": {
+        "vue": "https://cdn.jsdelivr.net/npm/vue",
+        "jupiter": "./dist/bundle.js"
+      }
+    }
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/extras/amd.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/systemjs/dist/extras/use-default.js"></script>
+</head>
+<body>
+  <div id="vue-container"></div>
+  <script>
+    System.import('jupiter')
+  </script>
+</body>
+</html>
diff --git a/loading-dependencies/webpack-externals/package.json b/loading-dependencies/webpack-externals/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "webpack-externals",
+  "scripts": {
+    "build": "webpack"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "clean-webpack-plugin": "^3.0.0",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.10"
+  },
+  "dependencies": {}
+}
diff --git a/loading-dependencies/webpack-externals/src/entry.js b/loading-dependencies/webpack-externals/src/entry.js
@@ -0,0 +1,12 @@
+import Vue from 'vue';
+
+console.log('Vue', Vue);
+
+const App = Vue.default.extend({
+  template: '<p>Jupiter has {{numMoons}} moons',
+  data: () => ({
+    numMoons: 79,
+  })
+});
+
+new App().$mount('#vue-container');
diff --git a/loading-dependencies/webpack-externals/webpack.config.js b/loading-dependencies/webpack-externals/webpack.config.js
@@ -0,0 +1,16 @@
+const path = require('path');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+
+module.exports = {
+  entry: path.resolve(__dirname, 'src/entry.js'),
+  mode: 'development',
+  output: {
+    filename: 'bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+    libraryTarget: 'system',
+  },
+  devtool: 'sourcemap',
+  plugins: [new CleanWebpackPlugin()],
+  // Webpack externals will be shared across bundles and come from the import map and systemjs
+  externals: ['vue', 'vue-router'],
+};
