Example of using webpack and js modules alongside vanilla js :)

.babelrc.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}

.gitignore

@@ -1,3 +1,5 @@
 .DS_Store
 ._.DS_Store
 node_modules
+vendor
+dist

Gruntfile.js

@@ -0,0 +1,31 @@
+const webpackDevConfig = require('./config/webpack.dev.js');
+const webpackProdConfig = require('./config/webpack.prod');
+
+module.exports = function(grunt) {
+
+  // Project configuration.
+  grunt.initConfig({
+    webpack: {
+      prod: webpackProdConfig,
+      dev: webpackDevConfig
+    },
+    "webpack-dev-server": {
+      dev: webpackDevConfig
+    },
+    downloadfile: {
+      options: {
+        dest: './vendor'
+      },
+      files: {
+        'mriviewer.js': 'https://cdn.jsdelivr.net/gh/r03ert0/[email protected]/mriviewer.js',
+        'mui.js': 'https://cdn.jsdelivr.net/gh/r03ert0/muijs/mui.js',
+        'mui.css': 'https://cdn.jsdelivr.net/gh/r03ert0/muijs/mui.css'
+      }
+    },
+
+  });
+  grunt.loadNpmTasks('grunt-downloadfile');
+  grunt.loadNpmTasks('grunt-webpack');
+  grunt.registerTask('serve', ['downloadfile', 'webpack-dev-server:dev'] )
+  grunt.registerTask('build', ['downloadfile', 'webpack:prod'] )
+};

config/paths.js

@@ -0,0 +1,12 @@
+const path = require('path')
+
+module.exports = {
+  // Source files
+  src: path.resolve(__dirname, '../'),
+
+  // Production build files
+  build: path.resolve(__dirname, '../dist'),
+
+  // Static files that get copied to build folder
+  img: path.resolve(__dirname, '../img'),
+}

config/webpack.common.js

@@ -0,0 +1,82 @@
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const webpack = require("webpack");
+const ImportHttpWebpackPlugin = require('import-http/webpack')
+
+const paths = require('./paths')
+
+module.exports = {
+  // Where webpack looks to start building the bundle
+  entry: {
+    index: paths.src + '/index.js',
+    render3D: paths.src + '/render3D/index.js'
+  },
+
+  // Where webpack outputs the assets and bundles
+  output: {
+    path: paths.build,
+    filename: '[name].bundle.js',
+    publicPath: '/',
+    clean: true,
+  },
+
+  // Customize the webpack build process
+  plugins: [
+    // Copies files from target to destination folder
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: paths.img,
+          to: 'img',
+          globOptions: {
+            ignore: ['*.DS_Store'],
+          },
+          noErrorOnMissing: true,
+        },
+      ],
+    }),
+
+    // Generates an HTML file from a template
+    // Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
+    new HtmlWebpackPlugin({
+      title: 'Thresholdmann',
+      template: paths.src + '/index.html', // template file
+      filename: 'index.html', // output file
+      scriptLoading: "blocking",
+      inject: "head",
+      chunks: ['index']
+    }),
+    new HtmlWebpackPlugin({
+      title: 'render3D',
+      template: paths.src + '/render3D/index.html',
+      filename: 'render3D/index.html',
+      chunks: ['render3D'],
+    }),
+
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+    }),
+
+    new ImportHttpWebpackPlugin()
+  ],
+
+  // Determine how modules within the project are treated
+  module: {
+    rules: [
+      // JavaScript: Use Babel to transpile JavaScript files
+      { test: /^\.js$/, use: ['babel-loader'] },
+
+      // Images: Copy image files to build folder
+      { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource' },
+
+      // Fonts and SVGs: Inline files
+      { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline' },
+    ],
+  },
+
+  resolve: {
+    modules: [paths.src, 'node_modules'],
+    extensions: ['.js', '.jsx', '.json'],
+  },
+}

config/webpack.dev.js

@@ -0,0 +1,36 @@
+const { merge } = require('webpack-merge')
+
+const common = require('./webpack.common')
+
+module.exports = merge(common, {
+  // Set the mode to development or production
+  mode: 'development',
+
+  // Control how source maps are generated
+  devtool: 'eval-source-map',
+
+  // Spin up a server for quick development
+  devServer: {
+    historyApiFallback: true,
+    open: true,
+    compress: true,
+    hot: true,
+    port: 8080,
+  },
+
+  module: {
+    rules: [
+      // Styles: Inject CSS into the head with source maps
+      {
+        test: /\.(sass|scss|css)$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: { sourceMap: true, importLoaders: 1, modules: false },
+          },
+        ],
+      },
+    ],
+  },
+})

config/webpack.prod.js

@@ -0,0 +1,53 @@
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
+const { merge } = require('webpack-merge')
+
+const paths = require('./paths')
+const common = require('./webpack.common')
+
+module.exports = merge(common, {
+  mode: 'production',
+  devtool: 'source-map',
+  output: {
+    path: paths.build,
+    publicPath: '/',
+    filename: 'js/[name].[contenthash].bundle.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(sass|scss|css)$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: 'css-loader',
+            options: {
+              importLoaders: 2,
+              sourceMap: false,
+              modules: false,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    // Extracts CSS into separate files
+    new MiniCssExtractPlugin({
+      filename: 'styles/[name].[contenthash].css',
+      chunkFilename: '[id].css',
+    }),
+  ],
+  optimization: {
+    minimize: true,
+    minimizer: [new CssMinimizerPlugin(), '...'],
+    runtimeChunk: {
+      name: 'runtime',
+    },
+  },
+  performance: {
+    hints: false,
+    maxEntrypointSize: 512000,
+    maxAssetSize: 512000,
+  },
+})

index.html

@@ -186,7 +186,7 @@
           <div id="control" style="flex:1; overflow: scroll">
             <table id="control-table">
               <tbody>
-              </tbody>      
+              </tbody>
             </table>
           </div>
         </div>
@@ -197,49 +197,54 @@
       Made with &nbsp; 🤍 &nbsp; Katja Heuer, Nicolas Traut & Roberto Toro
     </div>
 
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/r03ert0/[email protected]/mriviewer.js"></script>
-    <script src="https://cdn.jsdelivr.net/gh/r03ert0/muijs/mui.js"></script>
-
-    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/r03ert0/muijs/mui.css" />
-
-    <link rel="stylesheet" type="text/css" href="thresholdmann.css" />
-    <script src="thresholdmann.js"></script>
 
     <script>
-      let file = false;
-      for (const event of ["drag", "dragstart", "dragend", "dragover", "dragenter", "dragleave", "drop"]) {
-        document.querySelector("#upload-box").addEventListener(event, function(e) {
-          e.preventDefault();
-          e.stopPropagation();
-        });
-      }
-      for (const event of ["dragover", "dragenter"]) {
-        document.querySelector("#upload-box").addEventListener(event, function(e) {
-          document.querySelector("#upload-box").classList.add("is-dragover");
-        });
-      }
-      for (const event of ["dragleave", "dragend", "drop"]) {
-        document.querySelector("#upload-box").addEventListener(event, function(e) {
-          document.querySelector("#upload-box").classList.remove("is-dragover");
-        });
-      }
-      document.querySelector("#upload-box").addEventListener("drop", function(e) {
-        file = e.dataTransfer.files;
-        if (document.querySelector("#upload-box").classList.contains("is-uploading")) {
-          return false;
+
+      window.addEventListener('load', () => {
+        let file = false;
+        for (const event of [
+          "drag",
+          "dragstart",
+          "dragend",
+          "dragover",
+          "dragenter",
+          "dragleave",
+          "drop"]) {
+          document.querySelector("#upload-box").addEventListener(event, function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+          });
+        }
+        for (const event of ["dragover", "dragenter"]) {
+          document.querySelector("#upload-box").addEventListener(event, function(e) {
+            document.querySelector("#upload-box").classList.add("is-dragover");
+          });
         }
-        document.querySelector("#upload-box").classList.add("is-uploading");
-        document.querySelector("#upload-box").classList.remove("is-error");
-        e.preventDefault();
-        if (file) {
-          console.log(file[0]);
-          init(file[0]);
+        for (const event of ["dragleave", "dragend", "drop"]) {
+          document.querySelector("#upload-box").addEventListener(event, function(e) {
+            document.querySelector("#upload-box").classList.remove("is-dragover");
+          });
         }
-      });
+        document.querySelector("#upload-box").addEventListener("drop", function(e) {
+          file = e.dataTransfer.files;
+          if (document.querySelector("#upload-box").
+                  classList.
+                  contains("is-uploading")) {
+            return false;
+          }
+          document.querySelector("#upload-box").classList.add("is-uploading");
+          document.querySelector("#upload-box").classList.remove("is-error");
+          e.preventDefault();
+          if (file) {
+            console.log(file[0]);
+            init(file[0]);
+          }
+        });
+
+        MUI.push(document.querySelector('#loadNifti'), loadNifti);
+        MUI.push(document.querySelector('#loadDemoData'), loadDemoData);
 
-      MUI.push(document.querySelector('#loadNifti'), loadNifti);
-      MUI.push(document.querySelector('#loadDemoData'), loadDemoData);
+      })
   </script>
 
   </body>

index.js

@@ -0,0 +1,11 @@
+import { MRIViewer } from "exports-loader?exports=MRIViewer!./vendor/mriviewer.js";
+import { MUI } from  "exports-loader?exports=MUI!./vendor/mui.js";
+import "./vendor/mui.css";
+
+import "./thresholdmann.css";
+import  "./thresholdmann.js";
+import "./thresholdmann-worker.js";
+
+window.MRIViewer = MRIViewer;
+window.MUI = MUI;
+console.log(MUI)