Merge #687

687: Switch from brunch to webpack r=notriddle a=notriddle

Brunch isn't really being maintained any more,
and some of its deps are giving me security warnings.

Co-authored-by: Michael Howell <michael@notriddle.com>

.gitignore

@@ -11,6 +11,7 @@ erl_crash.dump
 
 # Static artifacts
 /node_modules
+/assets/node_modules
 
 # Generated documentation
 /doc

lib/web/static/js/app.js → assets/js/app.js

@@ -1,4 +1,10 @@
-// Brunch automatically concatenates all files in your
+// We need to import the CSS so that webpack will load it.
+// The MiniCssExtractPlugin is used to separate it out into
+// its own CSS file.
+import normalize_css from "../css/normalize.css"
+import css from "../css/app.css"
+
+// Webpack automatically concatenates all files in your
 // watched paths. Those paths can be configured at
 // config.paths.watched in "brunch-config.js".
 //

assets/package.json

@@ -0,0 +1,25 @@
+{
+  "repository": {},
+  "license": "APACHE-2.0",
+  "scripts": {
+    "deploy": "webpack",
+    "watch": "webpack --mode development --watch-stdin",
+    "webpack": "webpack"
+  },
+  "dependencies": {
+    "phoenix": "file:../deps/phoenix",
+    "phoenix_html": "file:../deps/phoenix_html"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "babel-loader": "^8.0.0",
+    "copy-webpack-plugin": "^4.5.0",
+    "css-loader": "^2.1.1",
+    "mini-css-extract-plugin": "^0.4.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "terser-webpack-plugin": "^1.1.0",
+    "webpack": "4.4.0",
+    "webpack-cli": "^3.3.2"
+  }
+}

assets/webpack.config.js

@@ -0,0 +1,44 @@
+const path = require('path');
+const glob = require('glob');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+module.exports = (env, options) => ({
+  optimization: {
+    minimizer: [
+      new TerserPlugin({ cache: true, parallel: true, sourceMap: false }),
+      new OptimizeCSSAssetsPlugin({})
+    ]
+  },
+  entry: {
+    './js/app.js': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
+  },
+  output: {
+    filename: 'app.js',
+    path: path.resolve(__dirname, '../priv/static/js')
+  },
+  stats: {
+    colors: !/^win/i.test(process.platform)
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader'
+        }
+      },
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader']
+      }
+    ]
+  },
+  plugins: [
+    new MiniCssExtractPlugin({ filename: '../css/app.css' }),
+    new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
+  ]
+});

config/dev.exs

@@ -11,8 +11,8 @@ config :bors, BorsNG.Endpoint,
   debug_errors: true,
   code_reloader: true,
   check_origin: false,
-  watchers: [node: ["node_modules/brunch/bin/brunch", "watch", "--stdin",
-                    cd: Path.expand("../", __DIR__)]]
+  watchers: [node: ["node_modules/webpack/bin/webpack.js", "--mode", "development", "--watch-stdin",
+                    cd: Path.expand("../assets", __DIR__)]]
 
 config :bors, BorsNG.WebhookParserPlug,
   webhook_secret: "XXX"