Merge branch 'master' into DepauMD

.babelrc

@@ -1,6 +1,11 @@
 {
   "presets": [
-    "es2015"
+    ["env", {
+      "targets": {
+        "node": "6",
+        "uglify": true
+      }
+    }]
   ],
   "plugins": [
     "transform-runtime"

app.js

@@ -58,7 +58,7 @@ app.use(morgan('combined', {
 
 // socket io
 var io = require('socket.io')(server)
-io.engine.ws = new (require('uws').Server)({
+io.engine.ws = new (require('ws').Server)({
   noServer: true,
   perMessageDeflate: false
 })

docs/guides/auth/gitlab-self-hosted.md

@@ -7,12 +7,12 @@
 2. Navigate to the application management page at `https://your.gitlab.domain/admin/applications` (admin permissions required)
 3. Click **New application** to create a new application and fill out the registration form:
 
-![New GitLab application](images/auth/gitlab-new-application.png)
+![New GitLab application](../images/auth/gitlab-new-application.png)
 
 4. Click **Submit**
 5. In the list of applications select **HackMD**. Leave that site open to copy the application ID and secret in the next step.
 
-![Application: HackMD](images/auth/gitlab-application-details.png)
+![Application: HackMD](../images/auth/gitlab-application-details.png)
 
 
 6. In the `docker-compose.yml` add the following environment variables to `app:` `environment:`
@@ -29,4 +29,4 @@
 7. Run `docker-compose up -d` to apply your settings.
 8. Sign in to your HackMD using your GitLab ID:
 
-![Sign in via GitLab](images/auth/gitlab-sign-in.png)
+![Sign in via GitLab](../images/auth/gitlab-sign-in.png)

docs/guides/auth/ldap-AD.md

@@ -0,0 +1,42 @@
+AD LDAP auth
+===
+
+
+To setup your CodiMD instance with Active Directory you need the following configs:
+
+```
+CMD_LDAP_URL=ldap://internal.example.com
+CMD_LDAP_BINDDN=cn=binduser,cn=Users,dc=internal,dc=example,dc=com
+CMD_LDAP_BINDCREDENTIALS=<super secret password>
+CMD_LDAP_SEARCHBASE=dc=internal,dc=example,dc=com
+CMD_LDAP_SEARCHFILTER=(&(objectcategory=person)(objectclass=user)(|(sAMAccountName={{username}})(mail={{username}})))
+CMD_LDAP_USERIDFIELD=sAMAccountName
+CMD_LDAP_PROVIDERNAME=Example Inc AD
+```
+
+
+`CMD_LDAP_BINDDN` is either the `distinguishedName` or the `userPrincipalName`. *This can cause "username/password is invalid" when either this value or the password from `CMD_LDAP_BINDCREDENTIALS` are incorrect.*
+
+`CMD_LDAP_SEARCHFILTER` matches on all users and uses either the email address or the `sAMAccountName` (usually the login name you also use to login to Windows).
+
+*Only using `sAMAccountName` looks like this:* `(&(objectcategory=person)(objectclass=user)(sAMAccountName={{username}}))`
+
+`CMD_LDAP_USERIDFIELD` says we want to use `sAMAccountName` as unique identifier for the account itself.
+
+`CMD_LDAP_PROVIDERNAME` just the name written above the username and password field on the login page.
+
+
+Same in json:
+
+```json
+"ldap": {
+    "url": "ldap://internal.example.com",
+    "bindDn": "cn=binduser,cn=Users,dc=internal,dc=example,dc=com",
+    "bindCredentials": "<super secret password>",
+    "searchBase": "dc=internal,dc=example,dc=com",
+    "searchFilter": "(&(objectcategory=person)(objectclass=user)(|(sAMAccountName={{username}})(mail={{username}})))",
+    "useridField": "sAMAccountName",
+},
+```
+
+More details and example: https://www.npmjs.com/package/passport-ldapauth

package.json

@@ -1,6 +1,6 @@
 {
   "name": "CodiMD",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Realtime collaborative markdown notes on all platforms.",
   "main": "app.js",
   "license": "AGPL-3.0",
@@ -125,12 +125,12 @@
     "to-markdown": "^3.0.3",
     "toobusy-js": "^0.5.1",
     "uuid": "^3.1.0",
-    "uws": "~0.14.1",
     "validator": "^10.4.0",
     "velocity-animate": "^1.4.0",
     "visibilityjs": "^1.2.4",
     "viz.js": "^1.7.0",
     "winston": "^2.3.0",
+    "ws": "^6.0.0",
     "xss": "^1.0.3"
   },
   "engines": {
@@ -154,35 +154,36 @@
     "url": "https://github.com/hackmdio/codimd.git"
   },
   "devDependencies": {
-    "babel-cli": "^6.18.0",
+    "babel-cli": "^6.26.0",
-    "babel-core": "^6.21.0",
+    "babel-core": "^6.26.3",
-    "babel-loader": "^6.2.10",
+    "babel-loader": "^7.1.4",
-    "babel-plugin-transform-runtime": "^6.15.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-polyfill": "^6.22.0",
+    "babel-polyfill": "^6.26.0",
-    "babel-preset-es2015": "^6.18.0",
+    "babel-preset-env": "^1.7.0",
-    "babel-runtime": "^6.20.0",
+    "babel-runtime": "^6.26.0",
-    "copy-webpack-plugin": "^4.0.1",
+    "copy-webpack-plugin": "^4.5.2",
-    "css-loader": "^0.26.1",
+    "css-loader": "^1.0.0",
     "doctoc": "^1.3.0",
-    "ejs-loader": "^0.3.0",
+    "ejs-loader": "^0.3.1",
-    "exports-loader": "^0.6.3",
+    "exports-loader": "^0.7.0",
-    "expose-loader": "^0.7.1",
+    "expose-loader": "^0.7.5",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "file-loader": "^2.0.0",
-    "file-loader": "^0.9.0",
+    "html-webpack-plugin": "^4.0.0-alpha",
-    "html-webpack-plugin": "^2.25.0",
+    "imports-loader": "^0.8.0",
-    "imports-loader": "^0.7.0",
-    "json-loader": "^0.5.4",
     "jsonlint": "^1.6.2",
     "less": "^2.7.1",
-    "less-loader": "^2.2.3",
+    "less-loader": "^4.1.0",
-    "optimize-css-assets-webpack-plugin": "^1.3.0",
+    "mini-css-extract-plugin": "^0.4.1",
-    "script-loader": "^0.7.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.0",
+    "script-loader": "^0.7.2",
     "standard": "^9.0.1",
     "string-loader": "^0.0.1",
-    "style-loader": "^0.13.1",
+    "style-loader": "^0.21.0",
-    "url-loader": "^0.5.7",
+    "uglifyjs-webpack-plugin": "^1.2.7",
-    "webpack": "^1.14.0",
+    "url-loader": "^1.0.1",
-    "webpack-parallel-uglify-plugin": "^0.2.0"
+    "webpack": "^4.14.0",
+    "webpack-cli": "^3.1.0",
+    "webpack-parallel-uglify-plugin": "^1.1.0"
   },
   "standard": {
     "globals": [
@@ -211,5 +212,9 @@
       "lib/ot",
       "public/vendor"
     ]
+  },
+  "optionalDependencies": {
+    "bufferutil": "^4.0.0",
+    "utf-8-validate": "^5.0.1"
   }
 }

public/docs/release-notes.md

@@ -1,6 +1,55 @@
 Release Notes
 ===
 
+<i class="fa fa-tag"></i> 1.2.1 <i class="fa fa-clock-o"></i> 2018-09-26 00:00
+---
+
+### Enhancements
+* Update Italian translations
+* Update Japanese translations
+* Update markdown-pdf
+* Add support for unix sockets
+* Update "follow us" information to Community channel and translation
+* Add Cloudron installation method
+* Add guide for Mattermost authentication
+* Update various packages
+* Add Indonesian language as new translation
+
+### Fixes
+* Fix content types in status router
+* Fix some modal colors in night mode
+* Fix CSP to allow usage of speaker notes
+* Fix some wrong title attributes in the editor toolbar
+* Fix some confusion about the default location of images. It's always the local filesystem now
+* Fix object handling in avatar generation code
+* Finally fix error handling of LZ-String by using self-maintained version
+* Fix migration handling
+* Fix gitlab API version
+* Fix some server crashes caused by PDF creation
+* Fix document length limit on post to `/new`
+* Fix broken youtube embedding on `/features` page
+
+### Refactors
+* Refactor generation of table of contents
+* Refactor "copyright"-section to be a "Powered by"
+
+### Removes
+* Remove unneeded inline styling
+
+### Deprecations
+* NodeJS version 6
+* Mattermost login integration (is replaced by [generic oAuth2 module](https://github.com/hackmdio/codimd/blob/6ce7b20a7f92ccff2f7f870ff5d116d685310cfd/docs/guides/auth/mattermost-self-hosted.md))
+
+### Honorable mentions
+* [Alex Hesse (Pingu501)](https://github.com/Pingu501)
+* [Alexander Wellbrock (w4tsn)](https://github.com/w4tsn)
+* [Cédric Couralet (micedre)](https://github.com/micedre)
+* [Girish Ramakrishnan (gramakri)](https://github.com/gramakri)
+* [maahl](https://github.com/maahl)
+* [Max Wu (jackycute)](https://github.com/jackycute)
+* [Miranda (ahihi)](https://github.com/ahihi)
+* [Ondřej Slabý (maxer456)](https://github.com/maxer456)
+
 <i class="fa fa-tag"></i> 1.2.0 <i class="fa fa-clock-o"></i> 2018-06-28 00:00
 ---
 

public/views/includes/header.ejs

@@ -1,3 +1,3 @@
 <% for (var css in htmlWebpackPlugin.files.css) { %>
-<link href="<%= webpackConfig.output.baseUrl %><%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
+<link href="<%= webpackConfig.output.baseUrl %><%= htmlWebpackPlugin.files.css[css].path %>" rel="stylesheet">
 <% } %>

public/views/includes/scripts.ejs

@@ -1,4 +1,4 @@
 <script src="<%= webpackConfig.output.baseUrl %>/config"></script>
-<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
+<% for (var js in htmlWebpackPlugin.files.js) { %>
-<script src="<%= webpackConfig.output.baseUrl %><%= htmlWebpackPlugin.files.chunks[chunk].entry %>" defer></script>
+<script src="<%= webpackConfig.output.baseUrl %><%= htmlWebpackPlugin.files.js[js].path %>" defer></script>
 <% } %>

webpack.config.js

@@ -1,10 +1,14 @@
 var baseConfig = require('./webpackBaseConfig')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 var path = require('path')
 
 module.exports = [Object.assign({}, baseConfig, {
   plugins: baseConfig.plugins.concat([
-    new ExtractTextPlugin('[name].css')
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[id].css'
+    })
+
   ]),
   devtool: 'source-map'
 }), {
@@ -13,15 +17,15 @@ module.exports = [Object.assign({}, baseConfig, {
     htmlExport: path.join(__dirname, 'public/js/htmlExport.js')
   },
   module: {
-    loaders: [{
+    rules: [{
       test: /\.css$/,
-      loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
+      use: ['style-loader', 'css-loader']
     }, {
       test: /\.scss$/,
-      loader: ExtractTextPlugin.extract('style-loader', 'sass-loader')
+      use: ['style-loader', 'sass-loader']
     }, {
       test: /\.less$/,
-      loader: ExtractTextPlugin.extract('style-loader', 'less-loader')
+      use: ['style-loader', 'less-loader']
     }]
   },
   output: {
@@ -30,6 +34,8 @@ module.exports = [Object.assign({}, baseConfig, {
     filename: '[name].js'
   },
   plugins: [
-    new ExtractTextPlugin('html.min.css')
+    new MiniCssExtractPlugin({
+      filename: 'html.min.css'
+    })
   ]
 }]

webpack.production.js

@@ -1,9 +1,9 @@
 var baseConfig = require('./webpackBaseConfig')
 var webpack = require('webpack')
 var path = require('path')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
-var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-var ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 module.exports = [Object.assign({}, baseConfig, {
   plugins: baseConfig.plugins.concat([
@@ -11,44 +11,36 @@ module.exports = [Object.assign({}, baseConfig, {
       'process.env': {
         'NODE_ENV': JSON.stringify('production')
       }
-    }),
+    })
-    new ParallelUglifyPlugin({
-      uglifyJS: {
-        compress: {
-          warnings: false
-        },
-        output: {
-          max_line_len: 1000000
-        },
-        mangle: false,
-        sourceMap: false
-      }
-    }),
-    new ExtractTextPlugin('[name].[hash].css')
   ]),
 
+  optimization: {
+    minimizer: [
+      new UglifyJsPlugin({
+        parallel: true,
+        cache: true
+      })
+    ],
+    splitChunks: {
+      chunks: 'async',
+      minChunks: Infinity
+    }
+  },
+
   output: {
     path: path.join(__dirname, 'public/build'),
     publicPath: '/build/',
-    filename: '[id].[name].[hash].js',
+    filename: '[id].[name].[hash].js'
-    baseUrl: '<%- url %>'
+    // baseUrl: '<%- url %>'
   }
 }), {
+  // This Chunk is used in the 'save as html' feature.
+  // It is embedded in the html file and contains CSS for styling.
+
   entry: {
     htmlExport: path.join(__dirname, 'public/js/htmlExport.js')
   },
-  module: {
+
-    loaders: [{
-      test: /\.css$/,
-      loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
-    }, {
-      test: /\.scss$/,
-      loader: ExtractTextPlugin.extract('style-loader', 'sass-loader')
-    }, {
-      test: /\.less$/,
-      loader: ExtractTextPlugin.extract('style-loader', 'less-loader')
-    }]
-  },
   output: {
     path: path.join(__dirname, 'public/build'),
     publicPath: '/build/',
@@ -60,7 +52,24 @@ module.exports = [Object.assign({}, baseConfig, {
         'NODE_ENV': JSON.stringify('production')
       }
     }),
-    new ExtractTextPlugin('html.min.css'),
+    new MiniCssExtractPlugin({
-    new OptimizeCssAssetsPlugin()
+      filename: 'html.min.css'
-  ]
+    })
+  ],
+
+  optimization: {
+    minimizer: [
+      new OptimizeCSSAssetsPlugin({})
+    ]
+  },
+
+  module: {
+    rules: [{
+      test: /\.css$/,
+      use: [
+        MiniCssExtractPlugin.loader,
+        'css-loader'
+      ]
+    }]
+  }
 }]

webpackBaseConfig.js

@@ -1,8 +1,8 @@
 var webpack = require('webpack')
 var path = require('path')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
 var CopyWebpackPlugin = require('copy-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 // Fix possible nofile-issues
 var fs = require('fs')
@@ -21,25 +21,19 @@ module.exports = {
       'moment': 'moment',
       'Handlebars': 'handlebars'
     }),
-    new webpack.optimize.OccurrenceOrderPlugin(true),
-    new webpack.optimize.CommonsChunkPlugin({
-      names: ['cover', 'index', 'pretty', 'slide', 'vendor'],
-      children: true,
-      async: true,
-      filename: '[name].js',
-      minChunks: Infinity
-    }),
     new HtmlWebpackPlugin({
       template: 'public/views/includes/header.ejs',
       chunks: ['font', 'index-styles', 'index'],
       filename: path.join(__dirname, 'public/views/build/index-header.ejs'),
-      inject: false
+      inject: false,
+      chunksSortMode: 'manual'
     }),
     new HtmlWebpackPlugin({
       template: 'public/views/includes/header.ejs',
       chunks: ['font-pack', 'index-styles-pack', 'index-styles', 'index'],
       filename: path.join(__dirname, 'public/views/build/index-pack-header.ejs'),
-      inject: false
+      inject: false,
+      chunksSortMode: 'manual'
     }),
     new HtmlWebpackPlugin({
       template: 'public/views/includes/scripts.ejs',
@@ -51,19 +45,22 @@ module.exports = {
       template: 'public/views/includes/scripts.ejs',
       chunks: ['common', 'index-pack'],
       filename: path.join(__dirname, 'public/views/build/index-pack-scripts.ejs'),
-      inject: false
+      inject: false,
+      chunksSortMode: 'manual'
     }),
     new HtmlWebpackPlugin({
       template: 'public/views/includes/header.ejs',
       chunks: ['font', 'cover'],
       filename: path.join(__dirname, 'public/views/build/cover-header.ejs'),
-      inject: false
+      inject: false,
+      chunksSortMode: 'manual'
     }),
     new HtmlWebpackPlugin({
       template: 'public/views/includes/header.ejs',
       chunks: ['font-pack', 'cover-styles-pack', 'cover'],
       filename: path.join(__dirname, 'public/views/build/cover-pack-header.ejs'),
-      inject: false
+      inject: false,
+      chunksSortMode: 'manual'
     }),
     new HtmlWebpackPlugin({
       template: 'public/views/includes/scripts.ejs',
@@ -75,19 +72,22 @@ module.exports = {
       template: 'public/views/includes/scripts.ejs',
       chunks: ['common', 'cover-pack'],
       filename: path.join(__dirname, 'public/views/build/cover-pack-scripts.ejs'),
-      inject: false
+      inject: false,
+      chunksSortMode: 'manual'
     }),
     new HtmlWebpackPlugin({
       template: 'public/views/includes/header.ejs',
       chunks: ['font', 'pretty-styles', 'pretty'],
       filename: path.join(__dirname, 'public/views/build/pretty-header.ejs'),
-      inject: false
+      inject: false,
+      chunksSortMode: 'manual'
     }),
     new HtmlWebpackPlugin({
       template: 'public/views/includes/header.ejs',
       chunks: ['font-pack', 'pretty-styles-pack', 'pretty-styles', 'pretty'],
       filename: path.join(__dirname, 'public/views/build/pretty-pack-header.ejs'),
-      inject: false
+      inject: false,
+      chunksSortMode: 'manual'
     }),
     new HtmlWebpackPlugin({
       template: 'public/views/includes/scripts.ejs',
@@ -99,19 +99,22 @@ module.exports = {
       template: 'public/views/includes/scripts.ejs',
       chunks: ['common', 'pretty-pack'],
       filename: path.join(__dirname, 'public/views/build/pretty-pack-scripts.ejs'),
-      inject: false
+      inject: false,
+      chunksSortMode: 'manual'
     }),
     new HtmlWebpackPlugin({
       template: 'public/views/includes/header.ejs',
       chunks: ['font', 'slide-styles', 'slide'],
       filename: path.join(__dirname, 'public/views/build/slide-header.ejs'),
-      inject: false
+      inject: false,
+      chunksSortMode: 'manual'
     }),
     new HtmlWebpackPlugin({
       template: 'public/views/includes/header.ejs',
       chunks: ['font-pack', 'slide-styles-pack', 'slide-styles', 'slide'],
       filename: path.join(__dirname, 'public/views/build/slide-pack-header.ejs'),
-      inject: false
+      inject: false,
+      chunksSortMode: 'manual'
     }),
     new HtmlWebpackPlugin({
       template: 'public/views/includes/scripts.ejs',
@@ -162,15 +165,17 @@ module.exports = {
         from: 'plugin',
         to: 'reveal.js/plugin'
       }
-    ])
+    ]),
+    new MiniCssExtractPlugin()
   ],
+
   entry: {
     font: path.join(__dirname, 'public/css/google-font.css'),
     'font-pack': path.join(__dirname, 'public/css/font.css'),
     common: [
-      'expose?jQuery!expose?$!jquery',
+      'expose-loader?jQuery!expose-loader?$!jquery',
       'velocity-animate',
-      'imports?$=jquery!jquery-mousewheel',
+      'imports-loader?$=jquery!jquery-mousewheel',
       'bootstrap'
     ],
     cover: [
@@ -187,27 +192,27 @@ module.exports = {
     'cover-pack': [
       'babel-polyfill',
       'bootstrap-validator',
-      'expose?select2!select2',
+      'expose-loader?select2!select2',
-      'expose?moment!moment',
+      'expose-loader?moment!moment',
-      'script!js-url',
+      'script-loader!js-url',
       path.join(__dirname, 'public/js/cover.js')
     ],
     index: [
       'babel-polyfill',
-      'script!jquery-ui-resizable',
+      'script-loader!jquery-ui-resizable',
-      'script!js-url',
+      'script-loader!js-url',
-      'expose?filterXSS!xss',
+      'expose-loader?filterXSS!xss',
-      'script!Idle.Js',
+      'script-loader!Idle.Js',
-      'expose?LZString!lz-string',
+      'expose-loader?LZString!lz-string',
-      'script!codemirror',
+      'script-loader!codemirror',
-      'script!inlineAttachment',
+      'script-loader!inlineAttachment',
-      'script!jqueryTextcomplete',
+      'script-loader!jqueryTextcomplete',
-      'script!codemirrorSpellChecker',
+      'script-loader!codemirrorSpellChecker',
-      'script!codemirrorInlineAttachment',
+      'script-loader!codemirrorInlineAttachment',
-      'script!ot',
+      'script-loader!ot',
       'flowchart.js',
       'js-sequence-diagrams',
-      'expose?RevealMarkdown!reveal-markdown',
+      'expose-loader?RevealMarkdown!reveal-markdown',
       path.join(__dirname, 'public/js/index.js')
     ],
     'index-styles': [
@@ -238,40 +243,40 @@ module.exports = {
     ],
     'index-pack': [
       'babel-polyfill',
-      'expose?Spinner!spin.js',
+      'expose-loader?Spinner!spin.js',
-      'script!jquery-ui-resizable',
+      'script-loader!jquery-ui-resizable',
       'bootstrap-validator',
-      'expose?jsyaml!js-yaml',
+      'expose-loader?jsyaml!js-yaml',
-      'script!mermaid',
+      'script-loader!mermaid',
-      'expose?moment!moment',
+      'expose-loader?moment!moment',
-      'script!js-url',
+      'script-loader!js-url',
-      'script!handlebars',
+      'script-loader!handlebars',
-      'expose?hljs!highlight.js',
+      'expose-loader?hljs!highlight.js',
-      'expose?emojify!emojify.js',
+      'expose-loader?emojify!emojify.js',
-      'expose?filterXSS!xss',
+      'expose-loader?filterXSS!xss',
-      'script!Idle.Js',
+      'script-loader!Idle.Js',
-      'script!gist-embed',
+      'script-loader!gist-embed',
-      'expose?LZString!lz-string',
+      'expose-loader?LZString!lz-string',
-      'script!codemirror',
+      'script-loader!codemirror',
-      'script!inlineAttachment',
+      'script-loader!inlineAttachment',
-      'script!jqueryTextcomplete',
+      'script-loader!jqueryTextcomplete',
-      'script!codemirrorSpellChecker',
+      'script-loader!codemirrorSpellChecker',
-      'script!codemirrorInlineAttachment',
+      'script-loader!codemirrorInlineAttachment',
-      'script!ot',
+      'script-loader!ot',
       'flowchart.js',
       'js-sequence-diagrams',
-      'expose?Viz!viz.js',
+      'expose-loader?Viz!viz.js',
-      'script!abcjs',
+      'script-loader!abcjs',
-      'expose?io!socket.io-client',
+      'expose-loader?io!socket.io-client',
-      'expose?RevealMarkdown!reveal-markdown',
+      'expose-loader?RevealMarkdown!reveal-markdown',
       path.join(__dirname, 'public/js/index.js')
     ],
     pretty: [
       'babel-polyfill',
-      'expose?filterXSS!xss',
+      'expose-loader?filterXSS!xss',
       'flowchart.js',
       'js-sequence-diagrams',
-      'expose?RevealMarkdown!reveal-markdown',
+      'expose-loader?RevealMarkdown!reveal-markdown',
       path.join(__dirname, 'public/js/pretty.js')
     ],
     'pretty-styles': [
@@ -288,28 +293,28 @@ module.exports = {
     ],
     'pretty-pack': [
       'babel-polyfill',
-      'expose?jsyaml!js-yaml',
+      'expose-loader?jsyaml!js-yaml',
-      'script!mermaid',
+      'script-loader!mermaid',
-      'expose?moment!moment',
+      'expose-loader?moment!moment',
-      'script!handlebars',
+      'script-loader!handlebars',
-      'expose?hljs!highlight.js',
+      'expose-loader?hljs!highlight.js',
-      'expose?emojify!emojify.js',
+      'expose-loader?emojify!emojify.js',
-      'expose?filterXSS!xss',
+      'expose-loader?filterXSS!xss',
-      'script!gist-embed',
+      'script-loader!gist-embed',
       'flowchart.js',
       'js-sequence-diagrams',
-      'expose?Viz!viz.js',
+      'expose-loader?Viz!viz.js',
-      'script!abcjs',
+      'script-loader!abcjs',
-      'expose?RevealMarkdown!reveal-markdown',
+      'expose-loader?RevealMarkdown!reveal-markdown',
       path.join(__dirname, 'public/js/pretty.js')
     ],
     slide: [
       'babel-polyfill',
       'bootstrap-tooltip',
-      'expose?filterXSS!xss',
+      'expose-loader?filterXSS!xss',
       'flowchart.js',
       'js-sequence-diagrams',
-      'expose?RevealMarkdown!reveal-markdown',
+      'expose-loader?RevealMarkdown!reveal-markdown',
       path.join(__dirname, 'public/js/slide.js')
     ],
     'slide-styles': [
@@ -325,25 +330,25 @@ module.exports = {
     ],
     'slide-pack': [
       'babel-polyfill',
-      'expose?jQuery!expose?$!jquery',
+      'expose-loader?jQuery!expose-loader?$!jquery',
       'velocity-animate',
-      'imports?$=jquery!jquery-mousewheel',
+      'imports-loader?$=jquery!jquery-mousewheel',
       'bootstrap-tooltip',
-      'expose?jsyaml!js-yaml',
+      'expose-loader?jsyaml!js-yaml',
-      'script!mermaid',
+      'script-loader!mermaid',
-      'expose?moment!moment',
+      'expose-loader?moment!moment',
-      'script!handlebars',
+      'script-loader!handlebars',
-      'expose?hljs!highlight.js',
+      'expose-loader?hljs!highlight.js',
-      'expose?emojify!emojify.js',
+      'expose-loader?emojify!emojify.js',
-      'expose?filterXSS!xss',
+      'expose-loader?filterXSS!xss',
-      'script!gist-embed',
+      'script-loader!gist-embed',
       'flowchart.js',
       'js-sequence-diagrams',
-      'expose?Viz!viz.js',
+      'expose-loader?Viz!viz.js',
-      'script!abcjs',
+      'script-loader!abcjs',
       'headjs',
-      'expose?Reveal!reveal.js',
+      'expose-loader?Reveal!reveal.js',
-      'expose?RevealMarkdown!reveal-markdown',
+      'expose-loader?RevealMarkdown!reveal-markdown',
       path.join(__dirname, 'public/js/slide.js')
     ]
   },
@@ -351,13 +356,12 @@ module.exports = {
   output: {
     path: path.join(__dirname, 'public/build'),
     publicPath: '/build/',
-    filename: '[name].js',
+    filename: '[name].js'
-    baseUrl: '<%- url %>'
   },
 
   resolve: {
-    modulesDirectories: ['node_modules'],
+    modules: ['node_modules'],
-    extensions: ['', '.js'],
+    extensions: ['.js'],
     alias: {
       codemirror: path.join(__dirname, 'node_modules/codemirror/codemirror.min.js'),
       inlineAttachment: path.join(__dirname, 'public/vendor/inlineAttachment/inline-attachment.js'),
@@ -388,54 +392,88 @@ module.exports = {
   },
 
   module: {
-    loaders: [{
+    rules: [{
-      test: /\.json$/,
-      loader: 'json-loader'
-    }, {
       test: /\.js$/,
-      loader: 'babel',
+      use: [{loader: 'babel-loader'}],
       exclude: [/node_modules/, /public\/vendor/]
     }, {
       test: /\.css$/,
-      loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
+      use: [
+        MiniCssExtractPlugin.loader,
+        'css-loader'
+      ]
     }, {
       test: /\.scss$/,
-      loader: ExtractTextPlugin.extract('style-loader', 'sass-loader')
+      use: [
+        MiniCssExtractPlugin.loader,
+        {
+          loader: 'css-loader',
+          options: {
+            importLoaders: 1
+          }
+        },
+        'sass-loader'
+      ]
     }, {
       test: /\.less$/,
-      loader: ExtractTextPlugin.extract('style-loader', 'less-loader')
+      use: [
+        MiniCssExtractPlugin.loader,
+        {
+          loader: 'css-loader',
+          options: {
+            importLoaders: 1
+          }
+        },
+        'less-loader'
+      ]
     }, {
       test: require.resolve('js-sequence-diagrams'),
-      loader: 'imports?_=lodash&Raphael=raphael&eve=eve'
+      use: [{
+        loader: 'imports-loader',
+        options: {_: 'lodash', Raphael: 'raphael', eve: 'eve'}
+      }]
     }, {
       test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
-      loader: 'file'
+      use: [{loader: 'file-loader'}]
     }, {
       test: /\.html$/,
-      loader: 'string'
+      use: [{loader: 'string-loader'}]
     }, {
       test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
-      loader: 'url?prefix=font/&limit=5000'
+      use: [{
+        loader: 'url-loader',
+        options: {prefix: 'font/', limit: '5000'}
+      }]
     }, {
       test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
-      loader: 'url?limit=10000&mimetype=application/octet-stream'
+      use: [{
+        loader: 'url-loader',
+        options: {limit: '5000', mimetype: 'application/octet-stream'}
+      }]
     }, {
       test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
-      loader: 'url?limit=10000&mimetype=image/svg+xml'
+      use: [{
+        loader: 'url-loader',
+        options: {limit: '10000', mimetype: 'svg+xml'}
+      }]
     }, {
       test: /\.png(\?v=\d+\.\d+\.\d+)?$/,
-      loader: 'url?limit=10000&mimetype=image/png'
+      use: [{
+        loader: 'url-loader',
+        options: {limit: '10000', mimetype: 'image/png'}
+      }]
     }, {
       test: /\.gif(\?v=\d+\.\d+\.\d+)?$/,
-      loader: 'url?limit=10000&mimetype=image/gif'
+      use: [{
+        loader: 'url-loader',
+        options: {limit: '10000', mimetype: 'image/gif'}
+      }]
     }]
   },
   node: {
     fs: 'empty'
   },
 
-  quiet: false,
-  noInfo: false,
   stats: {
     assets: false
   }