Merge pull request #120 from CaptainFact/improvement/sass-hmr

[Webpack] SASS hot reload + CSS minify
CaptainFact · May 15, 2018 · d7e1dde · d7e1dde
2 parents b51e734 + 8bf1ddb
commit d7e1dde
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 96 deletions.
diff --git a/app/index.html b/app/index.html
@@ -32,8 +32,6 @@
     <meta name="theme-color" content="#ffffff">
     <!-- Web extensions -->
     <link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/fnnhlmbnlbgomamcolcpgncflofhjckm">
-    <!-- Styles -->
-    <!-- <link rel="stylesheet" href="/assets/css/app.css?version={!major!}.{!minor!}.{!maintenance!}"> -->
     <!-- If you edit following <style/> you'll need to generate a new hash in nginx.conf CSP (style-src) -->
     <style>
       #preloading-frame {
@@ -45,15 +43,13 @@
     </style>
   </head>
   <body>
-    <div id='app' data-version="{!major!}.{!minor!}.{!maintenance!}">
+    <div id='app'>
       <!-- The content -->
       <div id="preloading-frame">
         <img src="/assets/img/logo.png" class="animated-logo"/>
         <p>Loading...</p>
         <noscript>Your browser does not support JavaScript!</noscript>
       </div>
     </div>
-    <!-- <script src="/assets/js/vendor.js?v={!major!}.{!minor!}.{!maintenance!}"></script>
-    <script src="/assets/js/app.js?v={!major!}.{!minor!}.{!maintenance!}"></script> -->
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -88,20 +88,21 @@
     "enzyme-to-json": "^3.3.1",
     "eslint": "^4.19.1",
     "eslint-plugin-react": "^7.7.0",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "fetch-mock": "^6.0.1",
     "file-loader": "^1.1.11",
     "html-webpack-plugin": "^3.2.0",
     "jest": "^22.4.2",
     "jest-localstorage-mock": "^2.2.0",
+    "mini-css-extract-plugin": "^0.4.0",
     "node-sass": "^4.8.3",
+    "optimize-css-assets-webpack-plugin": "^4.0.1",
     "react-hot-loader": "^4.1.1",
     "regenerator-runtime": "^0.11.1",
     "sass-loader": "^7.0.1",
+    "uglifyjs-webpack-plugin": "^1.2.5",
     "url-loader": "^1.0.1",
     "webpack": "^4.8.0",
     "webpack-bundle-analyzer": "^2.11.1",
-    "webpack-cleanup-plugin": "^0.5.1",
     "webpack-cli": "^2.1.3",
     "webpack-dashboard": "^1.1.1",
     "webpack-dev-server": "^3.1.4"

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,22 +1,24 @@
-"use strict"
+'use strict'
 
 const webpack = require('webpack')
 const path = require('path')
 const loadersConf = require('./webpack.loaders')
+
+// Plugins
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const DashboardPlugin = require('webpack-dashboard/plugin')
-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const Dotenv = require('dotenv-webpack')
 
-const HOST = process.env.HOST || "localhost";
-const PORT = process.env.PORT || "3333";
+const HOST = process.env.HOST || 'localhost'
+const PORT = process.env.PORT || '3333'
 
 
 module.exports = {
   mode: 'development',
   entry: {
-    "app": [
+    'app': [
       // POLYFILL: Set up an ES6-ish environment
       // 'babel-polyfill',  // The entire babel-polyfill
       // Or pick es6 features needed (included into babel-polyfill)
@@ -34,27 +36,27 @@ module.exports = {
     path: path.join(__dirname, 'public')
   },
   module: {
-    rules: loadersConf
+    rules: loadersConf(false)
   },
   resolve: {
     extensions: ['.js', '.jsx'],
     modules: [
-      path.join(__dirname, "src"),
-      path.join(__dirname, "node_modules"), // the old 'fallback' option (needed for npm link-ed packages)
+      path.join(__dirname, 'src'),
+      path.join(__dirname, 'node_modules'), // the old 'fallback' option (needed for npm link-ed packages)
     ],
     alias: {
-      "styles": path.resolve(__dirname, 'styles/'),
+      'styles': path.resolve(__dirname, 'styles/'),
     }
   },
   optimization: {
     splitChunks: {
       cacheGroups: {
-        commons: { test: /[\\/]node_modules[\\/]/, name: "vendor", chunks: "all" }
+        commons: { test: /[\\/]node_modules[\\/]/, name: 'vendor', chunks: 'all' }
       }
     }
   },
   devServer: {
-    contentBase: "./public",
+    contentBase: './public',
     // do not print bundle build stats
     noInfo: true,
     // enable HMR
@@ -68,37 +70,30 @@ module.exports = {
     host: HOST
   },
   plugins: [
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"development"'
-      }
-    }),
     new webpack.NoEmitOnErrorsPlugin(),
     new webpack.NamedModulesPlugin(),
     new webpack.HotModuleReplacementPlugin(),
     // regroup styles in app.css bundle
-    new ExtractTextPlugin({
-      filename: 'app.css',
-      allChunks: true
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
     }),
     // beautiful output
-    new DashboardPlugin(),
+    new DashboardPlugin({
+      minified: false,
+      gzip: false
+    }),
     // copy static assets as they are required from external sources
     new CopyWebpackPlugin(
       [{ from: 'app/assets', to: '', toType: 'dir' }], // patterns
       {} // options
     ),
     // load the bundles into an html template
     new HtmlWebpackPlugin({
-      template: 'app/index.html',
-      files: {
-        css: ['app.css'],
-        js: ["bundle.js"],
-      }
+      template: 'app/index.html'
     }),
     // loads up .env file
     new Dotenv({
       path: './config/env/dev.env'
     })
   ]
-};
+}
diff --git a/webpack.loaders.js b/webpack.loaders.js
@@ -1,21 +1,9 @@
-const path = require('path');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const path = require('path')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
-// Options passed to node-sass
-const sassIncludePaths = [
-  path.resolve(__dirname, 'styles'),
-];
-
-
-// These files will be imported in every sass file
-// TODO use this feature and refactor existing ? 
-const sassResourcesPaths = [
-  // path.resolve(__dirname, 'styles/abstracts/_variables.sass'),
-  // path.resolve(__dirname, 'styles/abstracts/_mixins.sass'),
-];
 
 // noinspection WebpackConfigHighlighting
-module.exports = [
+module.exports = isProd => [
   // =========
   // = Babel =
   // =========
@@ -24,52 +12,51 @@ module.exports = [
   {
     test: /\.jsx?$/,
     include: path.resolve(__dirname, 'app'),
-    loader: "babel-loader",
+    loader: 'babel-loader',
     options: {
       // This is a feature of `babel-loader` for Webpack (not Babel itself).
       // It enables caching results in ./node_modules/.cache/babel-loader/
       // directory for faster rebuilds.
       cacheDirectory: true,
       presets: [
-        ['es2015', { loose: true, modules: "umd" }],
+        ['es2015', { loose: true, modules: 'umd' }],
         'react'
       ],
       plugins: [
         'transform-class-properties',
         'transform-decorators-legacy',
         'transform-runtime'
       ]
-      // plugins: ['transform-decorators-legacy', '],
     }
   },
   // =========
   // = Fonts =
   // =========
   {
     test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
-    exclude: path.resolve(__dirname, "node_modules"),
-    use: ["file-loader"]
+    exclude: path.resolve(__dirname, 'node_modules'),
+    use: ['file-loader']
   },
   {
     test: /\.(woff|woff2)$/,
-    exclude: path.resolve(__dirname, "node_modules"),
+    exclude: path.resolve(__dirname, 'node_modules'),
     use: [
       {
-        loader: "url-loader",
-        options: { prefix: "font", limit: 5000 }
+        loader: 'url-loader',
+        options: { prefix: 'font', limit: 5000 }
       }
     ]
   },
   {
     test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
-    exclude: path.resolve(__dirname, "node_modules"),
+    exclude: path.resolve(__dirname, 'node_modules'),
     use: [
       {
-        loader: "url-loader",
+        loader: 'url-loader',
         options: {
-          prefix: "font",
+          prefix: 'font',
           limit: 10000,
-          mimetype: "application/octet-stream"
+          mimetype: 'application/octet-stream'
         }
       }
     ]
@@ -79,13 +66,13 @@ module.exports = [
   // ==========
   {
     test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-    exclude: path.resolve(__dirname, "node_modules"),
+    exclude: path.resolve(__dirname, 'node_modules'),
     use: [
       {
-        loader: "url-loader",
+        loader: 'url-loader',
         options: {
           limit: 10000,
-          mimetype: "image/svg+xml"
+          mimetype: 'image/svg+xml'
         }
       }
     ]
@@ -95,13 +82,13 @@ module.exports = [
     include: [
       path.resolve(__dirname, 'app/assets')
     ],
-    exclude: path.resolve(__dirname, "node_modules"),
+    exclude: path.resolve(__dirname, 'node_modules'),
     use: [
       {
-        loader: "file-loader",
+        loader: 'file-loader',
         options: {
           limit: 10000,
-          mimetype: "image/gif"
+          mimetype: 'image/gif'
         }
       }
     ]
@@ -111,13 +98,13 @@ module.exports = [
     include: [
       path.resolve(__dirname, 'app/assets')
     ],
-    exclude: path.resolve(__dirname, "node_modules"),
+    exclude: path.resolve(__dirname, 'node_modules'),
     use: [
       {
-        loader: "file-loader",
+        loader: 'file-loader',
         options: {
           limit: 10000,
-          mimetype: "image/jpg"
+          mimetype: 'image/jpg'
         }
       }
     ]
@@ -127,14 +114,14 @@ module.exports = [
     include: [
       path.resolve(__dirname, 'app/assets')
     ],
-    exclude: path.resolve(__dirname, "node_modules"),
+    exclude: path.resolve(__dirname, 'node_modules'),
     use: [
       {
-        loader: "file-loader",
+        loader: 'file-loader',
         options: {
           limit: 10000,
-          mimetype: "image/png",
-          name: "[path][name].[ext]"
+          mimetype: 'image/png',
+          name: '[path][name].[ext]'
         }
       }
     ]
@@ -146,10 +133,10 @@ module.exports = [
   // ==============================
   {
     test: /\.css/,
-    include: path.resolve(__dirname, "node_modules"),
+    include: path.resolve(__dirname, 'node_modules'),
     use: [
       {
-        loader: "style-loader"
+        loader: !isProd ? 'style-loader' : MiniCssExtractPlugin.loader
       },
       {
         loader: 'css-loader'
@@ -162,7 +149,10 @@ module.exports = [
       path.resolve(__dirname, 'node_modules'),
       path.resolve(__dirname, 'app/styles')
     ],
-    loader: ExtractTextPlugin.extract([
+    use: [
+      {
+        loader: !isProd ? 'style-loader' : MiniCssExtractPlugin.loader,
+      },
       {
         loader: 'css-loader'
       },
@@ -176,6 +166,6 @@ module.exports = [
           ]
         }
       }
-    ])
+    ]
   }
-];
+]