Support hot reloading of LESS and CSS chunks

Lokiedu · Oct 28, 2017 · 926ac3e · 926ac3e
1 parent 2d1f9a7
commit 926ac3e
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 46 deletions.
diff --git a/package.json b/package.json
@@ -19,9 +19,9 @@
     "build:client": "webpack --config './res/webpack/client.js'",
     "build:server": "webpack --config './res/webpack/server.js'",
     "build:tasks": "webpack --config './res/webpack/tasks.js'",
-    "test": "DB_ENV=test run-s reset-db:test build:client mocha",
+    "test": "DB_ENV=test run-s reset-db:test cleanup build:client mocha",
     "coverage": "DB_ENV=test npm run coverage:run",
-    "travis": "DB_ENV=travis run-s reset-db:travis build:client travis:test lint travis:flow",
+    "travis": "DB_ENV=travis run-s reset-db:travis cleanup build:client travis:test lint travis:flow",
     "travis:flow": "run-s flow:install-types flow",
     "travis:test": "run-s coverage:run coverage:coveralls coverage:clean",
     "reset-db:test": "echo \"Preparing test database...\" && babel-node test-helpers/dropDatabase.js && knex --env test migrate:latest",

diff --git a/res/webpack/client.js b/res/webpack/client.js
@@ -59,14 +59,6 @@ const clientConfiguration = merge({}, baseConfiguration, {
       filename: __DEV__ ? 'assets/[name].js' : 'assets/[name]-[chunkhash].js',
       name: 'manifest',
       minChunks: Infinity
-    }),
-    new ExtractTextPlugin({
-      filename: path.join('assets/styles/[name]-[contentHash].css'),
-      allChunks: true
-    }),
-    new ManifestPlugin({
-      fileName: 'webpack-chunks.json',
-      writeToFileEmit: true
     })
   ],
   target: 'web'
@@ -91,7 +83,11 @@ if (__DEV__) {
     },
     plugins: [
       new webpack.NamedChunksPlugin(),
-      new webpack.HotModuleReplacementPlugin()
+      new webpack.HotModuleReplacementPlugin(),
+      new ManifestPlugin({
+        fileName: 'webpack-chunks.json',
+        writeToFileEmit: true
+      })
     ]
   });
 } else {
@@ -119,6 +115,16 @@ if (__DEV__) {
         },
         sourceMap: false
       }),
+      new ExtractTextPlugin({
+        filename: path.join('assets/styles/[name]-[contentHash].css'),
+        allChunks: true
+      }),
+      // cannot push to __DEV__-independent config
+      // since the ordering makes sense (after ExtractTextPlugin in this case)
+      new ManifestPlugin({
+        fileName: 'webpack-chunks.json',
+        writeToFileEmit: true
+      }),
       new webpack.optimize.AggressiveMergingPlugin({
         minSizeReduce: true
       }),

diff --git a/res/webpack/rules.js b/res/webpack/rules.js
@@ -92,23 +92,35 @@ module.exports.clientLibFixes = () => [{
 }];
 
 module.exports.css = (__DEV__) => [{
-  test: /\.css$/,
-  use: ExtractTextPlugin.extract({
-    fallback: 'style-loader',
-    publicPath: '../../',
-    use: [
-      { loader: 'css-loader',
-        options: {
-          autoprefixer: false,
-          calc: false,
-          mergeIdents: false,
-          mergeRules: false,
-          uniqueSelectors: false
-        } },
-      { loader: 'postcss-loader' }
-    ].map(l => addSourceMap(l, __DEV__))
-  })
-}];
+  test: /\.css$/
+}].map(rule => {
+  let use;
+  if (__DEV__) {
+    use = [
+      { loader: 'style-loader?sourceMap' },
+      { loader: 'css-loader?sourceMap' },
+      { loader: 'postcss-loader?sourceMap' }
+    ];
+  } else {
+    use = ExtractTextPlugin.extract({
+      fallback: 'style-loader',
+      publicPath: '../../',
+      use: [
+        { loader: 'css-loader',
+          options: {
+            autoprefixer: false,
+            calc: false,
+            mergeIdents: false,
+            mergeRules: false,
+            uniqueSelectors: false
+          } },
+        { loader: 'postcss-loader' }
+      ]
+    });
+  }
+
+  return Object.assign(rule, { use });
+});
 
 module.exports.ejsIndexTemplate = () => [{
   test: /\/index\.ejs$/,
@@ -173,24 +185,37 @@ module.exports.less = (__DEV__, context) => [{
       { test: /\.less$/ },
       { include: path.join(context, 'src/less') },
     ]
-  },
-  use: ExtractTextPlugin.extract({
-    fallback: 'style-loader',
-    publicPath: '../../',
-    use: [
-      { loader: 'css-loader',
-        options: {
-          autoprefixer: false,
-          calc: false,
-          mergeIdents: false,
-          mergeRules: false,
-          uniqueSelectors: false
-        } },
-      { loader: 'postcss-loader' },
-      { loader: 'less-loader' }
-    ].map(l => addSourceMap(l, __DEV__))
-  })
-}];
+  }
+}].map(rule => {
+  let use;
+  if (__DEV__) {
+    use = [
+      { loader: 'style-loader?sourceMap' },
+      { loader: 'css-loader?sourceMap' },
+      { loader: 'postcss-loader?sourceMap' },
+      { loader: 'less-loader?sourceMap' }
+    ];
+  } else {
+    use = ExtractTextPlugin.extract({
+      fallback: 'style-loader',
+      publicPath: '../../',
+      use: [
+        { loader: 'css-loader',
+          options: {
+            autoprefixer: false,
+            calc: false,
+            mergeIdents: false,
+            mergeRules: false,
+            uniqueSelectors: false
+          } },
+        { loader: 'postcss-loader' },
+        { loader: 'less-loader' }
+      ]
+    });
+  }
+
+  return Object.assign(rule, { use });
+});
 
 module.exports.serverJS = (__DEV__, context) => [{
   test: /\.js?$/,

diff --git a/src/views/index.ejs b/src/views/index.ejs
@@ -20,8 +20,12 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
   <%- metadata.title %>
+  <% if (paths.webpackChunks['vendor.css']) { %>
   <link rel="stylesheet" href="<%- paths.webpackChunks['vendor.css'] %>">
+  <% } %>
+  <% if (paths.webpackChunks['app.css']) { %>
   <link rel="stylesheet" href="<%- paths.webpackChunks['app.css'] %>">
+  <% } %>
   <link href='https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css' rel='stylesheet' />
   <% if (gtm) { %>
   <!-- Google Tag Manager -->