Migrate to webpack

.circleci/config.yml

@@ -87,7 +87,7 @@ jobs:
 
       - run:
           name: Build assets
-          command: node node_modules/brunch/bin/brunch build
+          command: node node_modules/webpack/bin/webpack.js --mode development
           working_directory: "apps/explorer_web/assets"
 
       - persist_to_workspace:

.gitignore

@@ -13,9 +13,6 @@ erl_crash.dump
 # Generated on crash by NPM
 npm-debug.log
 
-# Generated on crash by Yarn
-yarn-error.log
-
 # Static artifacts
 /apps/explorer_web/assets/node_modules
 

apps/explorer_web/assets/.eslintrc

@@ -1,6 +1,3 @@
 {
-  "extends": "standard",
+  "extends": "standard"
-  "globals": {
-    "$": false
-  }
 }

apps/explorer_web/assets/babelrc

@@ -0,0 +1,5 @@
+{
+  presets: [
+    'env'
+  ]
+}

apps/explorer_web/assets/brunch-config.js

@@ -1,118 +0,0 @@
-exports.config = {
-  // See http://brunch.io/#documentation for docs.
-  files: {
-    javascripts: {
-      entryPoints: {
-        'js/app.js': 'js/app.js'
-      },
-
-      joinTo: {
-        'js/test.js': [/^spec/, /^js/, /^node_modules/]
-      }
-
-      // To use a separate vendor.js bundle, specify two files path
-      // http://brunch.io/docs/config#-files-
-      // joinTo: {
-      //   'js/app.js': /^js/,
-      //   'js/vendor.js': /^(?!js)/
-      // }
-      //
-      // To change the order of concatenation of files, explicitly mention here
-      // order: {
-      //   before: [
-      //     'vendor/js/jquery-2.1.1.js',
-      //     'vendor/js/bootstrap.min.js'
-      //   ]
-      // }
-    },
-    stylesheets: {
-      joinTo: {
-        'css/app.css': 'css/app.scss'
-      }
-    },
-    templates: {
-      joinTo: 'js/app.js'
-    }
-  },
-
-  conventions: {
-    // This option sets where we should place non-css and non-js assets in.
-    // By default, we set this to '/assets/static'. Files in this directory
-    // will be copied to `paths.public`, which is 'priv/static' by default.
-    assets: /^(static)/
-  },
-
-  // Phoenix paths configuration
-  paths: {
-    // Dependencies and current project directories to watch
-    watched: ['static', 'css', 'css/**', 'js', 'vendor', 'spec'],
-    // Where to compile files to
-    public: '../priv/static'
-  },
-
-  // Configure your plugins
-  plugins: {
-    babel: {
-      presets: ['env'],
-
-      // Do not use ES6 compiler in vendor code
-      ignore: [/vendor/]
-    },
-
-    copycat: {
-      'fonts': ['node_modules/font-awesome/fonts']
-    },
-
-    sass: {
-      mode: 'native',
-      precision: 8,
-      allowCache: true,
-      options: {
-        includePaths: [
-          'node_modules/bootstrap/scss',
-          'node_modules/font-awesome/scss'
-        ]
-      }
-    },
-
-    postcss: {
-      processors: [
-        require('autoprefixer')(['last 4 versions']),
-        require('csswring')()
-      ]
-    }
-  },
-
-  modules: {
-    autoRequire: {
-      'js/app.js': ['js/app'],
-      'js/test.js': ['spec/spec_helper']
-    }
-  },
-
-  overrides: {
-    production: {
-      optimize: true,
-      sourceMaps: false,
-      plugins: {
-        autoReload: {enabled: false},
-      },
-      modules: {autoRequire: {'js/app.js': ['js/app']}},
-      paths: {watched: ['static', 'css', 'css/**', 'js', 'vendor']},
-      files: {
-        javascripts: {joinTo: 'js/app.js'},
-        stylesheets: {joinTo: 'css/app.css'},
-      }
-    }
-  },
-
-  npm: {
-    enabled: true,
-    globals: {
-      $: 'jquery',
-      jQuery: 'jquery',
-      Popper: 'popper.js',
-      bootstrap: 'bootstrap'
-    }
-  }
-}

apps/explorer_web/assets/css/app.scss

@@ -7,6 +7,7 @@
 /* This file is for your main application css. */
 
 // Font Awesome
+$fa-font-path: "~font-awesome/fonts";
 @import "font-awesome";
 
 // Bootstrap Core CSS

apps/explorer_web/assets/js/app.js

@@ -1,16 +1,14 @@
-// Brunch automatically concatenates all files in your
+// We need to import the CSS so that webpack will load it.
-// watched paths. Those paths can be configured at
+// The ExtractTextPlugin is used to separate it out into
-// config.paths.watched in "brunch-config.js".
+// its own CSS file.
-//
+import '../css/app.scss'
-// However, those files will only be executed if
-// explicitly imported. The only exception are files
-// in vendor, which are never wrapped in imports and
-// therefore are always executed.
 
+// webpack automatically concatenates all files in your
+// watched paths. Those paths can be configured as
+// endpoints in "webpack.config.js".
+//
 // Import dependencies
 //
-// If you no longer want to use a dependency, remember
-// to also remove its path from "config.paths.watched".
 import '@babel/polyfill'
 import 'phoenix_html'
 import 'bootstrap'

apps/explorer_web/assets/js/lib/sidebar.js

@@ -1,3 +1,5 @@
+import $ from 'jquery'
+
 $('#sidebarCollapse').on('click', function () {
   $('#sidebar--container').toggleClass('active')
   $(this).toggleClass('active')

apps/explorer_web/assets/package.json

@@ -12,35 +12,40 @@
     "npm": "5.x"
   },
   "scripts": {
-    "deploy": "brunch build --production",
+    "deploy": "webpack --mode production",
-    "watch": "brunch watch --stdin",
+    "watch": "webpack --mode development --watch",
-    "build": "brunch build",
+    "build": "webpack --mode development",
     "eslint": "eslint js/**"
   },
   "dependencies": {
-    "@babel/polyfill": "^7.0.0-beta.39",
-    "autoprefixer": "^8.3.0",
-    "babel-brunch": "6.1.1",
-    "babel-preset-env": "^1.6.1",
     "bootstrap": "^4.1.0",
-    "brunch": "2.10.9",
-    "copycat-brunch": "^1.1.0",
-    "csswring": "^6.0.3",
     "font-awesome": "^4.7.0",
     "jquery": "^3.3.1",
     "phoenix": "file:../../../deps/phoenix",
     "phoenix_html": "file:../../../deps/phoenix_html",
-    "popper.js": "^1.14.3",
+    "popper.js": "^1.14.3"
-    "postcss-brunch": "0.5.0",
-    "sass-brunch": "^2.10.4",
-    "uglify-js-brunch": "2.10.0"
   },
   "devDependencies": {
+    "@babel/polyfill": "^7.0.0-beta.46",
+    "autoprefixer": "^8.4.1",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.4",
+    "babel-preset-env": "^1.6.1",
+    "copy-webpack-plugin": "^4.5.1",
+    "css-loader": "^0.28.11",
     "eslint": "^4.15.0",
     "eslint-config-standard": "^11.0.0-beta.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-node": "^5.2.1",
     "eslint-plugin-promise": "^3.6.0",
-    "eslint-plugin-standard": "^3.0.1"
+    "eslint-plugin-standard": "^3.0.1",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "file-loader": "^1.1.11",
+    "node-sass": "^4.9.0",
+    "postcss-loader": "^2.1.4",
+    "sass-loader": "^7.0.1",
+    "style-loader": "^0.21.0",
+    "webpack": "^4.6.0",
+    "webpack-cli": "^2.1.2"
   }
 }

apps/explorer_web/assets/postcss.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')({
+      browsers: [
+        'last 4 versions'
+      ]
+    })
+  ]
+};

apps/explorer_web/assets/webpack.config.js

@@ -0,0 +1,56 @@
+const path = require('path');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = {
+  entry: './js/app.js',
+  output: {
+    filename: 'app.js',
+    path: path.resolve(__dirname, '../priv/static/js')
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader'
+        }
+      },
+      {
+        test: /\.scss$/,
+        use: ExtractTextPlugin.extract({
+          use: [{
+            loader: "css-loader"
+          }, {
+            loader: "postcss-loader"
+          }, {
+            loader: "sass-loader",
+            options: {
+              precision: 8,
+              includePaths: [
+                'node_modules/bootstrap/scss',
+                'node_modules/font-awesome/scss'
+              ]
+            }
+          }],
+          fallback: 'style-loader'
+        })
+      }, {
+        test: /\.(svg|ttf|eot|woff|woff2)$/,
+        use: {
+          loader: 'file-loader',
+          options: {
+            name: '[name].[ext]',
+            outputPath: '../fonts/',
+            publicPath: '../fonts/'
+          }
+        }
+      }
+    ]
+  },
+  plugins: [
+    new ExtractTextPlugin('../css/app.css'),
+    new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
+  ]
+};

apps/explorer_web/config/dev.exs

@@ -5,7 +5,7 @@ use Mix.Config
 #
 # The watchers configuration can be used to run external
 # watchers to your application. For example, we use it
-# with brunch.io to recompile .js and .css sources.
+# with webpack to recompile .js and .css sources.
 config :explorer_web, ExplorerWeb.Endpoint,
   http: [port: 4000],
   debug_errors: true,
@@ -13,9 +13,10 @@ config :explorer_web, ExplorerWeb.Endpoint,
   check_origin: false,
   watchers: [
     node: [
-      "node_modules/brunch/bin/brunch",
+      "node_modules/webpack/bin/webpack.js",
-      "watch",
+      "--mode",
-      "--stdin",
+      "development",
+      "--watch",
       cd: Path.expand("../assets", __DIR__)
     ]
   ]