Fix for React being loaded twice.

If two chunks (with potentially overlapping modules) are intended to be loaded on the same page we need to use CommonsChunkPlugin to extract the common dependencies into a commons chunk to prevent some modules from being loaded twice. Alternatively we could stop using multiple chunks.

Fix for React being loaded twice.
e5f78b32 · Tom Robinson · 55768c8e · e5f78b32 · e5f78b32
Commit e5f78b32 authored 9 years ago by Tom Robinson
--- a/resources/frontend_client/index.html
+++ b/resources/frontend_client/index.html
@@ -8,10 +8,11 @@
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <title>Metabase</title>

-        <link rel="stylesheet" href="/app/dist/styles.css"/>
-        <script charset="utf-8" src="/app/dist/styles.js"></script>
-        <script src="/app/dist/vendor.js"></script>
-        <script src="/app/dist/app.js"></script>
+        <link rel="stylesheet" href="/app/dist/styles.bundle.css"/>
+        <script charset="utf-8" src="/app/dist/common.bundle.js"></script>
+        <script charset="utf-8" src="/app/dist/styles.bundle.js"></script>
+        <script charset="utf-8" src="/app/dist/vendor.bundle.js"></script>
+        <script charset="utf-8" src="/app/dist/app.bundle.js"></script>
    </head>

    <body ng-controller="Corvus">

--- a/webpack.config.js
+++ b/webpack.config.js
@@ -40,7 +40,7 @@ module.exports = {
    // output to "dist"
    output: {
        path: __dirname + '/resources/frontend_client/app/dist',
-        filename: '[name].js'
+        filename: '[name].bundle.js'
    },

    module: {
@@ -105,9 +105,9 @@ module.exports = {
        // new NgAnnotatePlugin({ add: true }),
        // Separates out modules common to multiple entry points into a single common file that should be loaded first.
        // Not currently useful but necessary for code-splitting
-        // new CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
+        new CommonsChunkPlugin('common', 'common.bundle.js'),
        // Extracts initial CSS into a standard stylesheet that can be loaded in parallel with JavaScript
-        new ExtractTextPlugin('styles.css')
+        new ExtractTextPlugin('styles.bundle.css')
    ],

    // CSSNext configuration