Merge pull request #932 from davidmehren/webpack-4

Upgrade to Webpack 4

1 files changed, 150 insertions, 112 deletions

diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js
index 798b64e7..19d021d9 100644
--- a/webpackBaseConfig.js
+++ b/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?moment!moment',
-      'script!js-url',
+      'expose-loader?select2!select2',
+      'expose-loader?moment!moment',
+      'script-loader!js-url',
       path.join(__dirname, 'public/js/cover.js')
     ],
     index: [
       'babel-polyfill',
-      'script!jquery-ui-resizable',
-      'script!js-url',
-      'expose?filterXSS!xss',
-      'script!Idle.Js',
-      'expose?LZString!lz-string',
-      'script!codemirror',
-      'script!inlineAttachment',
-      'script!jqueryTextcomplete',
-      'script!codemirrorSpellChecker',
-      'script!codemirrorInlineAttachment',
-      'script!ot',
+      'script-loader!jquery-ui-resizable',
+      'script-loader!js-url',
+      'expose-loader?filterXSS!xss',
+      'script-loader!Idle.Js',
+      'expose-loader?LZString!lz-string',
+      'script-loader!codemirror',
+      'script-loader!inlineAttachment',
+      'script-loader!jqueryTextcomplete',
+      'script-loader!codemirrorSpellChecker',
+      'script-loader!codemirrorInlineAttachment',
+      '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',
-      'script!jquery-ui-resizable',
+      'expose-loader?Spinner!spin.js',
+      'script-loader!jquery-ui-resizable',
       'bootstrap-validator',
-      'expose?jsyaml!js-yaml',
-      'script!mermaid',
-      'expose?moment!moment',
-      'script!js-url',
-      'script!handlebars',
-      'expose?hljs!highlight.js',
-      'expose?emojify!emojify.js',
-      'expose?filterXSS!xss',
-      'script!Idle.Js',
-      'script!gist-embed',
-      'expose?LZString!lz-string',
-      'script!codemirror',
-      'script!inlineAttachment',
-      'script!jqueryTextcomplete',
-      'script!codemirrorSpellChecker',
-      'script!codemirrorInlineAttachment',
-      'script!ot',
+      'expose-loader?jsyaml!js-yaml',
+      'script-loader!mermaid',
+      'expose-loader?moment!moment',
+      'script-loader!js-url',
+      'script-loader!handlebars',
+      'expose-loader?hljs!highlight.js',
+      'expose-loader?emojify!emojify.js',
+      'expose-loader?filterXSS!xss',
+      'script-loader!Idle.Js',
+      'script-loader!gist-embed',
+      'expose-loader?LZString!lz-string',
+      'script-loader!codemirror',
+      'script-loader!inlineAttachment',
+      'script-loader!jqueryTextcomplete',
+      'script-loader!codemirrorSpellChecker',
+      'script-loader!codemirrorInlineAttachment',
+      'script-loader!ot',
       'flowchart.js',
       'js-sequence-diagrams',
-      'expose?Viz!viz.js',
-      'script!abcjs',
-      'expose?io!socket.io-client',
-      'expose?RevealMarkdown!reveal-markdown',
+      'expose-loader?Viz!viz.js',
+      'script-loader!abcjs',
+      'expose-loader?io!socket.io-client',
+      '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',
-      'script!mermaid',
-      'expose?moment!moment',
-      'script!handlebars',
-      'expose?hljs!highlight.js',
-      'expose?emojify!emojify.js',
-      'expose?filterXSS!xss',
-      'script!gist-embed',
+      'expose-loader?jsyaml!js-yaml',
+      'script-loader!mermaid',
+      'expose-loader?moment!moment',
+      'script-loader!handlebars',
+      'expose-loader?hljs!highlight.js',
+      'expose-loader?emojify!emojify.js',
+      'expose-loader?filterXSS!xss',
+      'script-loader!gist-embed',
       'flowchart.js',
       'js-sequence-diagrams',
-      'expose?Viz!viz.js',
-      'script!abcjs',
-      'expose?RevealMarkdown!reveal-markdown',
+      'expose-loader?Viz!viz.js',
+      'script-loader!abcjs',
+      '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',
-      'script!mermaid',
-      'expose?moment!moment',
-      'script!handlebars',
-      'expose?hljs!highlight.js',
-      'expose?emojify!emojify.js',
-      'expose?filterXSS!xss',
-      'script!gist-embed',
+      'expose-loader?jsyaml!js-yaml',
+      'script-loader!mermaid',
+      'expose-loader?moment!moment',
+      'script-loader!handlebars',
+      'expose-loader?hljs!highlight.js',
+      'expose-loader?emojify!emojify.js',
+      'expose-loader?filterXSS!xss',
+      'script-loader!gist-embed',
       'flowchart.js',
       'js-sequence-diagrams',
-      'expose?Viz!viz.js',
-      'script!abcjs',
+      'expose-loader?Viz!viz.js',
+      'script-loader!abcjs',
       'headjs',
-      'expose?Reveal!reveal.js',
-      'expose?RevealMarkdown!reveal-markdown',
+      'expose-loader?Reveal!reveal.js',
+      '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',
-    baseUrl: '<%- url %>'
+    filename: '[name].js'
   },
 
   resolve: {
-    modulesDirectories: ['node_modules'],
-    extensions: ['', '.js'],
+    modules: ['node_modules'],
+    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: [{
-      test: /\.json$/,
-      loader: 'json-loader'
-    }, {
+    rules: [{
       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
   }