Merge pull request #75 from LinkValue/feature/improve-webpack-prod-re…

…ndering improve webpack production CSS rendering
Linkvalue · May 17, 2017 · 5fdc9f8 · 5fdc9f8
2 parents 75382dd + aa1e862
commit 5fdc9f8
Show file tree

Hide file tree

Showing 7 changed files with 56 additions and 32 deletions.
diff --git a/composer.json b/composer.json
@@ -51,7 +51,6 @@
             "Incenteev\\ParameterHandler\\ScriptHandler::buildParameters",
             "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::buildBootstrap",
             "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::clearCache",
-            "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::installAssets",
             "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::installRequirementsFile",
             "Sensio\\Bundle\\DistributionBundle\\Composer\\ScriptHandler::prepareDeploymentTarget"
         ],

diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "babel-preset-es2015": "^6.24.0",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.27.3",
+    "extract-text-webpack-plugin": "^2.1.0",
     "file-loader": "^0.10.1",
     "nave": "^2.2.3",
     "node-sass": "^4.5.0",

diff --git a/src/AppBundle/Resources/public/js/main.js b/src/AppBundle/Resources/public/js/main.js
@@ -1,13 +1,2 @@
-
-// npm assets
-import 'bootstrap/dist/js/bootstrap.min.js';
-import 'bootstrap/dist/css/bootstrap.min.css';
-import 'datatables/media/js/jquery.dataTables.min.js';
-import 'datatables-bootstrap3-plugin/media/js/datatables-bootstrap3.js';
-import 'datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css';
-import 'components-font-awesome/css/font-awesome.min.css';
-
-// our assets
 import '../scss/reset-bootstrap.scss';
 import '../scss/main.scss';
-
diff --git a/src/AppBundle/Resources/public/js/vendor.js b/src/AppBundle/Resources/public/js/vendor.js
@@ -0,0 +1,6 @@
+import 'bootstrap/dist/js/bootstrap.min.js';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'datatables/media/js/jquery.dataTables.min.js';
+import 'datatables-bootstrap3-plugin/media/js/datatables-bootstrap3.js';
+import 'datatables-bootstrap3-plugin/media/css/datatables-bootstrap3.css';
+import 'components-font-awesome/css/font-awesome.min.css';
diff --git a/src/AppBundle/Resources/views/layout.html.twig b/src/AppBundle/Resources/views/layout.html.twig
@@ -5,6 +5,11 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>{% block title %}{{ 'admin.title'|trans }}{% endblock %}</title>
         <link rel="shortcut icon" href="{{ asset('favicon.ico') }}" />
+
+        {% block stylesheets %}
+            <link rel="stylesheet" href="{{ asset('assets/vendor.css') }}" />
+            <link rel="stylesheet" href="{{ asset('assets/main.css') }}" />
+        {% endblock %}
     </head>
     <body class="{% block body_class '' %}">
 
@@ -59,6 +64,8 @@
             <script src="{{ url('bazinga_jstranslation_js') }}"></script>
             <script src="{{ asset('assets/fos-js-routing.js') }}"></script>
             <script src="{{ path('fos_js_routing_js', {'callback': 'fos.Router.setData'}) }}"></script>
+            <script src="{{ asset('assets/common.js') }}"></script>
+            <script src="{{ asset('assets/vendor.js') }}"></script>
             <script src="{{ asset('assets/main.js') }}"></script>
         {% endblock %}
     </body>

diff --git a/src/ApplicationBundle/Resources/views/Build/form.html.twig b/src/ApplicationBundle/Resources/views/Build/form.html.twig
@@ -26,3 +26,8 @@
     {{ include('MajoraOTAStoreAppBundle::upload-container-template.html.twig') }}
     <script src="{{ asset('assets/build-form.js') }}"></script>
 {% endblock %}
+
+{% block stylesheets %}
+    {{ parent() }}
+    <link rel="stylesheet" href="{{ asset('assets/build-form.css') }}" />
+{% endblock %}
diff --git a/webpack.config.js b/webpack.config.js
@@ -2,9 +2,21 @@ const path = require('path');
 const isDev = require('isdev');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const { optimize } = require('webpack');
+
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const extractCSS = new ExtractTextPlugin({
+  filename: '[name].css?[contenthash]',
+  allChunks: true,
+});
+const extractSASS = new ExtractTextPlugin({
+  filename: '[name].css?[contenthash]',
+  allChunks: true,
+});
 
 const config = {
   entry: {
+    vendor: './src/AppBundle/Resources/public/js/vendor.js',
     main: './src/AppBundle/Resources/public/js/main.js',
     'application-form': './src/AppBundle/Resources/public/js/application-form.js',
     'build-form': './src/AppBundle/Resources/public/js/build-form.js',
@@ -26,29 +38,31 @@ const config = {
         },
       },
       {
-        test: /\.css/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-          },
-        ],
+        test: /\.css$/,
+        use: isDev
+          ? ['style-loader', 'css-loader']
+          : extractCSS.extract({
+            fallback: 'style-loader',
+            use: {
+              loader: 'css-loader',
+            },
+          }),
       },
       {
         test: /\.scss$/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-          },
-          {
-            loader: 'sass-loader',
-          },
-        ],
+        use: isDev
+          ? ['style-loader', 'css-loader', 'sass-loader']
+          : extractSASS.extract({
+            fallback: 'style-loader',
+            use: [
+              {
+                loader: 'css-loader',
+              },
+              {
+                loader: 'sass-loader',
+              },
+            ],
+          }),
       },
       {
         test: /\.(png|gif|jpg|svg|woff2?|ttf|eot)$/,
@@ -73,6 +87,7 @@ const config = {
         to: 'bazinga-translator.js',
       },
     ]),
+    new optimize.CommonsChunkPlugin({ name: 'common', filename: 'common.js' }),
   ],
   externals: {
     jquery: 'jQuery',
@@ -93,6 +108,8 @@ if (isDev) {
   };
 } else {
   config.plugins.push(new UglifyJSPlugin());
+  config.plugins.push(extractCSS);
+  config.plugins.push(extractSASS);
 }
 
 module.exports = config;