Hello Webpack4

ui/build/config/gulp.js

@@ -1,4 +1,4 @@
-/* eslint-disable */
+/* eslint-disable import/no-extraneous-dependencies */
 import _ from 'lodash';
 import moment from 'moment';
 import gulp from 'gulp';
@@ -14,7 +14,7 @@ import vjGenerateLocales from '../plugins/gulpGenerateLocales';
 import vjTouch from '../plugins/gulpTouch';
 
 let isInWatchMode = false;
-export let tasks = {};
+export const tasks = {};
 const iconTimestamp = moment.utc([2017, 0, 1, 0, 0, 0, 0]).unix();
 
 function handleWatchChange(name, r = 300) {

ui/build/config/webpack.js

@@ -1,22 +1,16 @@
-/* eslint-disable */
+/* eslint-disable import/no-extraneous-dependencies */
-import _ from 'lodash';
-
 import webpack from 'webpack';
 import fs from 'fs-extra';
 
 import MonacoWebpackPlugin from 'monaco-editor-webpack-plugin';
 import FriendlyErrorsPlugin from 'friendly-errors-webpack-plugin';
 import OptimizeCssAssetsPlugin from 'optimize-css-assets-webpack-plugin';
-import ExtractTextPlugin from 'extract-text-webpack-plugin';
+import ExtractCssPlugin from 'mini-css-extract-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
 import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
-import StaticManifestPlugin from '../plugins/webpackStaticManifestPlugin.js';
+import StaticManifestPlugin from '../plugins/webpackStaticManifestPlugin';
-import DummyOutputPlugin from '../plugins/webpackDummyOutputPlugin.js';
+import mapWebpackUrlPrefix from '../utils/mapWebpackUrlPrefix';
-import mapWebpackUrlPrefix from '../utils/mapWebpackUrlPrefix.js';
+import root from '../utils/root';
-import root from '../utils/root.js';
-
-const extractProjectCSS = new ExtractTextPlugin({ filename: 'vj4.css?[sha1:contenthash:hex:10]', allChunks: true });
-const extractVendorCSS = new ExtractTextPlugin({ filename: 'vendors.css?[sha1:contenthash:hex:10]', allChunks: true });
 
 const beautifyOutputUrl = mapWebpackUrlPrefix([
   { prefix: 'node_modules/katex/dist/', replace: 'katex/' },
@@ -49,10 +43,6 @@ export default function (env = {}) {
     };
   }
 
-  function jsonLoader() {
-    return 'json-loader';
-  }
-
   function postcssLoader() {
     return {
       loader: 'postcss-loader',
@@ -62,18 +52,6 @@ export default function (env = {}) {
     };
   }
 
-  function styleLoader() {
-    return 'style-loader';
-  }
-
-  function cssLoader() {
-    return 'css-loader?importLoaders=1';
-  }
-
-  function stylusLoader() {
-    return 'stylus-loader';
-  }
-
   function fileLoader() {
     return {
       loader: 'file-loader',
@@ -83,8 +61,18 @@ export default function (env = {}) {
     };
   }
 
+  function extractCssLoader() {
+    return {
+      loader: ExtractCssPlugin.loader,
+      options: {
+        publicPath: '/public/path/to/',
+      },
+    };
+  }
+
   const config = {
     bail: true,
+    mode: 'production',
     profile: true,
     context: root(),
     devtool: env.production ? 'source-map' : false,
@@ -112,7 +100,7 @@ export default function (env = {}) {
       rules: [
         {
           test: /\.jsx?$/,
-          exclude: /node_modules[\/\\]/,
+          exclude: /node_modules[/\\]/,
           enforce: 'pre',
           use: [eslintLoader()],
         },
@@ -124,13 +112,9 @@ export default function (env = {}) {
         {
           // ES2015 scripts
           test: /\.js$/,
-          exclude: /node_modules[\/\\]/,
+          exclude: /node_modules[/\\]/,
           use: [babelLoader()],
         },
-        {
-          test: /\.json$/,
-          use: [jsonLoader()],
-        },
         {
           // fix pickadate loading
           test: /pickadate/,
@@ -142,35 +126,23 @@ export default function (env = {}) {
           ],
         },
         {
-          // project stylus stylesheets
           test: /\.styl$/,
-          use: env.watch
+          use: [extractCssLoader(), 'css-loader?importLoaders=1', postcssLoader(), 'stylus-loader']
-            ? [styleLoader(), cssLoader(), postcssLoader(), stylusLoader()]
-            : extractProjectCSS.extract([cssLoader(), postcssLoader(), stylusLoader()])
           ,
         },
         {
-          // vendors stylesheets
           test: /\.css$/,
-          include: /node_modules[\/\\]/,
+          use: [extractCssLoader(), 'css-loader?importLoaders=1', postcssLoader()]
-          use: env.watch
-            ? [styleLoader(), cssLoader()]
-            : extractVendorCSS.extract([cssLoader()])
-          ,
-        },
-        {
-          // project stylesheets
-          test: /\.css$/,
-          exclude: /node_modules[\/\\]/,
-          use: env.watch
-            ? [styleLoader(), cssLoader(), postcssLoader()]
-            : extractProjectCSS.extract([cssLoader(), postcssLoader()])
           ,
         },
       ],
     },
+    optimization: {
+      splitChunks: {
+        minChunks: 2,
+      },
+    },
     plugins: [
-
       new webpack.ProvidePlugin({
         $: 'jquery',
         jQuery: 'jquery',
@@ -186,41 +158,12 @@ export default function (env = {}) {
 
       new MonacoWebpackPlugin({
         // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
-        languages: ['cpp', 'csharp', 'java', 'javascript', 'python', 'rust', 'ruby', 'php', 'pascal', 'go']
+        languages: ['cpp', 'csharp', 'java', 'javascript', 'python', 'rust', 'ruby', 'php', 'pascal', 'go'],
       }),
 
-      // extract stylesheets into a standalone file
+      new ExtractCssPlugin({
-      env.watch
+        filename: 'vj4.css?[contenthash:10]',
-        ? new DummyOutputPlugin('vendors.css')
+        allChunks: true,
-        : extractVendorCSS,
-
-      env.watch
-        ? new DummyOutputPlugin('vj4.css')
-        : extractProjectCSS,
-
-      // extract 3rd-party JavaScript libraries into a standalone file
-      env.watch
-        ? new DummyOutputPlugin('vendors.js')
-        : new webpack.optimize.CommonsChunkPlugin({
-          name: 'vendors',
-          minChunks: (module, count) => (
-            module.resource
-                        && module.resource.indexOf(root('node_modules'))
-                        && module.resource.match(/\.jsx?$/)
-          ),
-        }),
-
-      // extract manifest into a standalone file
-      env.watch
-        ? new DummyOutputPlugin('manifest.js')
-        : new webpack.optimize.CommonsChunkPlugin({
-          name: 'manifest',
-        }),
-
-      new webpack.optimize.CommonsChunkPlugin({
-        children: true,
-        async: true,
-        minChunks: 2,
       }),
 
       // copy static assets
@@ -272,8 +215,6 @@ export default function (env = {}) {
       new webpack.LoaderOptionsPlugin({
         options: {
           context: root(),
-
-          // Beautify the output path of assets
           customInterpolateName: (url, name, options) => beautifyOutputUrl(url),
         },
       }),

ui/build/main.js

@@ -1,4 +1,4 @@
-/* eslint-disable */
+/* eslint-disable import/no-extraneous-dependencies */
 import { argv } from 'yargs';
 import root from './utils/root';
 import runGulp from './runGulp';

ui/build/plugins/gulpGenerateLocales.js

@@ -1,4 +1,4 @@
-/* eslint-disable */
+/* eslint-disable import/no-extraneous-dependencies */
 import yaml from 'js-yaml';
 
 import PluginError from 'plugin-error';

ui/build/plugins/gulpTouch.js

@@ -1,4 +1,4 @@
-/* eslint-disable */
+/* eslint-disable import/no-extraneous-dependencies */
 import PluginError from 'plugin-error';
 import through from 'through2';
 import fs from 'fs-extra';

ui/build/plugins/webpackDummyOutputPlugin.js

@@ -1,16 +0,0 @@
-/* eslint-disable */
-export default class DummyOutputPlugin {
-  constructor(file) {
-    this.file = file;
-  }
-
-  apply(compiler) {
-    compiler.plugin('emit', (compilation, callback) => {
-      compilation.assets[this.file] = {
-        source: () => '',
-        size: () => 0,
-      };
-      callback();
-    });
-  }
-}

ui/build/plugins/webpackStaticManifestPlugin.js

@@ -1,4 +1,4 @@
-/* eslint-disable */
+/* eslint-disable import/no-extraneous-dependencies */
 const _ = require('lodash');
 const crypto = require('crypto');
 

ui/build/runGulp.js

@@ -1,9 +1,8 @@
-/* eslint-disable */
+/* eslint-disable import/no-extraneous-dependencies */
-import _ from 'lodash';
 import gulp from 'gulp';
 import log from 'fancy-log';
 import chalk from 'chalk';
-import gulpConfig from './config/gulp.js';
+import gulpConfig from './config/gulp';
 
 export default async function ({ watch, production }) {
   function handleError(err) {

ui/build/runWebpack.js

@@ -1,4 +1,4 @@
-/* eslint-disable */
+/* eslint-disable import/no-extraneous-dependencies */
 import fs from 'fs';
 import webpack from 'webpack';
 import root from './utils/root';
@@ -8,12 +8,6 @@ export default function ({ watch, production }) {
   const compiler = webpack(webpackConfig({ watch, production }));
   compiler.apply(new webpack.ProgressPlugin());
 
-  const outputOptions = {
-    colors: true,
-    errorDetails: true,
-    optimizationBailout: production,
-  };
-
   function compilerCallback(err, stats) {
     if (err) {
       console.error(err.stack || err);

ui/build/utils/mapWebpackUrlPrefix.js

@@ -1,4 +1,4 @@
-/* eslint-disable */
+/* eslint-disable import/no-extraneous-dependencies */
 import _ from 'lodash';
 
 export default function mapWebpackUrlPrefix(mapList) {

ui/package.json

@@ -37,7 +37,6 @@
     "eslint-plugin-import": "^2.17.2",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.13.0",
-    "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^2.0.0",
     "friendly-errors-webpack-plugin": "^1.7.0",
     "fs-extra": "^8.0.1",
@@ -52,7 +51,7 @@
     "js-yaml": "^3.13.1",
     "json-loader": "^0.5.7",
     "monaco-editor-webpack-plugin": "^1.9.0",
-    "optimize-css-assets-webpack-plugin": "^3.2.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "postcss-loader": "^3.0.0",
     "rupture": "^0.7.1",
     "style-loader": "^0.23.1",
@@ -61,7 +60,7 @@
     "through2": "^3.0.1",
     "uglifyjs-webpack-plugin": "^1.3.0",
     "vinyl-buffer": "^1.0.1",
-    "webpack": "^3.12.0",
+    "webpack": "^4.42.1",
     "yargs": "^13.2.4"
   },
   "dependencies": {
@@ -79,6 +78,7 @@
     "jquery.transit": "^0.9.12",
     "katex": "^0.10.2",
     "lodash": "^4.17.13",
+    "mini-css-extract-plugin": "^0.9.0",
     "moment": "^2.24.0",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
@@ -110,7 +110,6 @@
   "scripts": {
     "build": "node build",
     "build:production": "node build --production",
-    "build:watch": "node build --watch",
     "lint": "eslint --fix ."
   },
   "babel": {