Update to webpack4.

.gitignore

@@ -4,4 +4,7 @@ Thumbs.db
 Desktop.ini
 
 # sass
-node_modules/
+node_modules/
+
+# yarn
+yarn-error.log

package.json

@@ -6,19 +6,20 @@
   "author": "Juraj Bubniak <juraj.bubniak@gmail.com>",
   "license": "MIT",
   "scripts": {
-    "build": "webpack",
-    "watch": "webpack --progress --colors --watch"
+    "build": "webpack --mode production",
+    "watch": "webpack --mode development --progress --colors --watch"
   },
   "devDependencies": {
-    "css-loader": "^0.28.11",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "node-sass": "^4.13.0",
+    "css-loader": "^3.4.2",
+    "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.13.1",
     "normalize.css": "^8.0.1",
-    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "perfectionist": "^2.4.0",
-    "postcss-discard-comments": "^2.0.4",
-    "sass-loader": "^6.0.7",
-    "style-loader": "^0.19.1",
-    "webpack": "^3.12.0"
+    "postcss-discard-comments": "^4.0.2",
+    "sass-loader": "^8.0.2",
+    "webpack": "^4.41.5",
+    "webpack-cli": "^3.3.10",
+    "webpack-fix-style-only-entries": "^0.4.0"
   }
-}
+}

static/dist/styles.css

@@ -78,7 +78,7 @@ pre code { padding: 0; }
 code { padding: 2px 4px; font-size: 90%; color: #f03838; background-color: #f1f0ea; border-radius: 4px; }
 hr { border: none; border-bottom: 1px dotted #303030; margin: 45px 0; }
 table { margin-bottom: 40px; width: 100%; }
-table tbody > tr:nth-child(odd) > td, table tbody > tr:nth-child(odd) > th { background-color: #f7f7f3; }
+table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th { background-color: #f7f7f3; }
 table th { padding: 0 10px 10px; text-align: left; }
 table td { padding: 10px; }
 table tr { border-bottom: 1px dotted #aeadad; }
@@ -118,7 +118,7 @@ table tr { border-bottom: 1px dotted #aeadad; }
 .post-content a:hover { border-bottom: 1px dotted #f03838; padding: 0 0 2px; }
 .post-content:last-child { margin-bottom: 0; }
 .post-content .footnote { border-spacing: 0; margin-bottom: 0; }
-.post-content .footnote .label + td { width: 100%; }
+.post-content .footnote .label+td { width: 100%; }
 .post-content .gist tr { border-bottom: 0; }
 .post-footer { margin-top: 5px; }
 .post-tags, .share { color: #aeadad; font-size: 14px; }
@@ -178,7 +178,7 @@ table tr { border-bottom: 1px dotted #aeadad; }
  .site-header { padding-top: 40px; }
  .site-title { float: none; margin-bottom: 15px; }
  .site-title a { float: none; }
- .site-title + .button-square { margin-left: 0; }
+ .site-title+.button-square { margin-left: 0; }
  .site-nav-item { display: block; margin: 15px 0; }
  .post-header { margin-bottom: 20px; padding-bottom: 20px; }
  .post-header p { word-wrap: break-word; overflow-wrap: break-word; }

webpack.config.js

@@ -1,7 +1,8 @@
 const path = require('path');
 const perfectionist = require('perfectionist');
 const discardComments = require('postcss-discard-comments');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 
 module.exports = {
@@ -12,14 +13,16 @@ module.exports = {
     modules: [
       'node_modules'
     ],
-    extensions: ['.js', '.scss'],
+    extensions: ['.scss'],
   },
   output: {
     path: path.join(__dirname, 'static', 'dist'),
-    filename: '[name].css'
   },
   plugins: [
-    new ExtractTextPlugin('[name].css'),
+    new FixStyleOnlyEntriesPlugin(),
+    new MiniCssExtractPlugin({
+      filename: '[name].css'
+    }),
     new OptimizeCssAssetsPlugin({
       cssProcessor: discardComments,
       canPrint: false
@@ -33,10 +36,10 @@ module.exports = {
     })
   ],
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.scss$/,
-        loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader!sass-loader' })
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
       }
     ]
   }