Merge pull request #5719 from paulkaplan/dynamic-import

Support dynamic imports to load code only when needed

.babelrc

 {
     "plugins": [
         "transform-object-rest-spread",
-        "transform-require-context"
+        "transform-require-context",
+        "syntax-dynamic-import"
     ],
     "presets": ["es2015", "react"],
 }

package-lock.json

@@ -3396,6 +3396,12 @@
         }
       }
     },
+    "babel-plugin-syntax-dynamic-import": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz",
+      "integrity": "sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo=",
+      "dev": true
+    },
     "babel-plugin-syntax-flow": {
       "version": "6.18.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz",

package.json

@@ -69,6 +69,7 @@
     "babel-core": "6.23.1",
     "babel-eslint": "10.0.3",
     "babel-loader": "7.1.0",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-object-rest-spread": "6.26.0",
     "babel-plugin-transform-require-context": "0.1.1",
     "babel-preset-es2015": "6.22.0",

src/template.ejs

@@ -59,11 +59,11 @@
         <div id="app"></div>
 
         <!-- Vendor & Initialize (Session & Localization)-->
-        <script src="/<%= htmlWebpackPlugin.files.chunks.common.entry %>"></script>
+        <script src="<%= htmlWebpackPlugin.files.chunks.common.entry %>"></script>
 
         <!-- Scripts -->
         <script src="/js/<%= htmlWebpackPlugin.options.route.name %>.intl.js"></script>
-        <script src="/<%= htmlWebpackPlugin.files.chunks[htmlWebpackPlugin.options.route.name].entry %>"></script>
+        <script src="<%= htmlWebpackPlugin.files.chunks[htmlWebpackPlugin.options.route.name].entry %>"></script>
 
         <!-- Translate title element -->
         <% if (!htmlWebpackPlugin.options.dynamicMetaTags) { %>

webpack.config.js

@@ -72,7 +72,8 @@ module.exports = {
     mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
     output: {
         path: path.resolve(__dirname, 'build'),
-        filename: 'js/[name].bundle.js'
+        filename: 'js/[name].bundle.js',
+        publicPath: '/'
     },
     resolve: {
         symlinks: false // Fix local development with `npm link` packages