Update to webpack 4 + misc build process changes

app/package.json

@@ -3,9 +3,9 @@
         "license": "MIT",
         "version": "0.1.0-alpha1",
         "scripts": {
-                "build": "node scripts/build.js",
-                "install-manifest": "node scripts/install-manifest.js",
-                "start-debug": "node scripts/start-debug.js",
+                "build": "node bin/build.js",
+                "install-manifest": "node bin/install-manifest.js",
+                "start-debug": "node bin/start-debug.js",
                 "start": "node dist/app.js"
         },
         "dependencies": {

ext/build.js

@@ -1,20 +1,29 @@
-const spawn = require('child_process').spawn;
+const { spawn } = require('child_process');
 const argv = require('minimist')(process.argv.slice(2));
 
-const appId = argv.appId || "19A6F4AE";
+
+const extensionName = "fx_cast";
+const extensionId = "fx_cast@matt.tf";
+const extensionVersion = "0.0.1";
+
+// Default argument values
+const { mirroringAppId = "19A6F4AE"
+      , mode = "development" } = argv;
 
 const child = spawn(
-    `webpack --env.appId=${appId} `
-        + '&& web-ext build '
-            + '--overwrite-dest '
-            + '--source-dir '
-            + '../dist/ext/unpacked '
-            + '--artifacts-dir '
-            + '../dist/ext '
-        + '&& mv ../dist/ext/*.zip ../dist/ext/ext.xpi'
+    `webpack --env.extensionName=${extensionName} `
+          + `--env.extensionId=${extensionId} `
+          + `--env.extensionVersion=${extensionVersion} `
+          + `--env.mirroringAppId=${mirroringAppId} `
+          + `--mode=${mode} `
+          + `${argv.watch ? "--watch" : ""} `
+        + `&& web-ext build --overwrite-dest `
+                         + `--source-dir ../dist/ext `
+                         + `--artifacts-dir ../dist/ext `
   , {
         shell: true
     }
 );
+
 child.stdout.pipe(process.stdout);
 child.stderr.pipe(process.stderr);

ext/package.json

@@ -1,24 +1,23 @@
 {
     "scripts": {
         "build": "node build.js",
-        "watch": "webpack -d --watch"
+        "watch": "node build.js --watch"
     },
     "devDependencies": {
-        "babel-core": "^6.26.0",
-        "babel-loader": "^7.1.2",
-        "babel-plugin-transform-class-properties": "^6.24.1",
-        "babel-plugin-transform-do-expressions": "^6.22.0",
-        "babel-plugin-transform-object-rest-spread": "^6.26.0",
-        "babel-preset-env": "^1.6.1",
-        "babel-preset-react": "^6.24.1",
+        "@babel/core": "^7.1.5",
+        "@babel/plugin-proposal-class-properties": "^7.1.0",
+        "@babel/plugin-proposal-do-expressions": "^7.0.0",
+        "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+        "@babel/preset-env": "^7.1.5",
+        "@babel/preset-react": "^7.0.0",
+        "babel-loader": "^8.0.4",
         "copy-webpack-plugin": "^4.3.1",
         "minimist": "^1.2.0",
-        "react": "^16.2.0",
-        "react-dom": "^16.2.0",
-        "web-ext": "^2.7.0",
-        "webpack": "^3.10.0"
-    },
-    "dependencies": {
-        "uuid": "^3.2.1"
+        "react": "^16.6.1",
+        "react-dom": "^16.6.1",
+        "uuid": "^3.2.1",
+        "web-ext": "^2.9.1",
+        "webpack": "^4.25.1",
+        "webpack-cli": "^3.1.2"
     }
 }

ext/src/_locales/en/messages.json

@@ -1,6 +1,6 @@
 {
     "extension_name": {
-        "message": "fx_cast"
+        "message": "EXTENSION_NAME"
     }
   , "extension_description": {
         "message": ""

ext/src/manifest.json

@@ -1,11 +1,11 @@
 {
     "name": "__MSG_extension_name__"
   , "description": "__MSG_extension_description__"
-  , "version": "0.0.1"
+  , "version": "EXTENSION_VERSION"
 
   , "applications": {
         "gecko": {
-            "id": "fx_cast@matt.tf"
+            "id": "EXTENSION_ID"
           , "strict_min_version": "57.0"
         }
     }

ext/src/options/defaultOptions.js

@@ -7,5 +7,5 @@ export default {
         "https://www.netflix.com/*"
     ]
   , option_mirroringEnabled: false
-  , option_mirroringAppId: MIRROR_CAST_APP_ID || "19A6F4AE"
+  , option_mirroringAppId: MIRRORING_APP_ID
 }

ext/webpack.config.js

@@ -1,57 +1,74 @@
 "use strict";
 
-const path         = require("path");
-const webpack      = require("webpack");
-const webpack_copy = require("copy-webpack-plugin");
+const path              = require("path");
+const webpack           = require("webpack");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
 
 
-const include_path = path.resolve(__dirname, "src");
-const output_path  = path.resolve(__dirname, "../dist/ext/unpacked");
+const includePath = path.resolve(__dirname, "src");
+const outputPath  = path.resolve(__dirname, "../dist/ext/");
 
 module.exports = (env) => ({
     entry: {
-        "main"           : `${include_path}/main.js`
-      , "popup/bundle"   : `${include_path}/popup/index.js`
-      , "options/bundle" : `${include_path}/options/index.jsx`
-      , "shim/bundle"    : `${include_path}/shim/index.js`
-      , "content"        : `${include_path}/content.js`
-      , "contentSetup"   : `${include_path}/contentSetup.js`
-      , "mediaCast"      : `${include_path}/mediaCast.js`
-      , "mirroringCast"  : `${include_path}/mirroringCast.js`
-      , "messageRouter"  : `${include_path}/messageRouter.js`
+        "main"           : `${includePath}/main.js`
+      , "popup/bundle"   : `${includePath}/popup/index.js`
+      , "options/bundle" : `${includePath}/options/index.jsx`
+      , "shim/bundle"    : `${includePath}/shim/index.js`
+      , "content"        : `${includePath}/content.js`
+      , "contentSetup"   : `${includePath}/contentSetup.js`
+      , "mediaCast"      : `${includePath}/mediaCast.js`
+      , "mirroringCast"  : `${includePath}/mirroringCast.js`
+      , "messageRouter"  : `${includePath}/messageRouter.js`
     }
   , output: {
         filename: "[name].js"
-      , path: `${output_path}`
+      , path: `${outputPath}`
     }
   , plugins: [
-      //, new webpack.optimize.CommonsChunkPlugin("lib/init.bundle")
         new webpack.DefinePlugin({
-            "process.env.NODE_ENV": `"production"`
-          , "MIRROR_CAST_APP_ID": JSON.stringify(env.appId.toString() || "19A6F4AE")
+            "EXTENSION_NAME"    : JSON.stringify(env.extensionName)
+          , "EXTENSION_ID"      : JSON.stringify(env.extensionId)
+          , "EXTENSION_VERSION" : JSON.stringify(env.extensionVersion)
+          , "MIRRORING_APP_ID"  : JSON.stringify(env.mirroringAppId)
         })
 
-        // Ext copy assets
-      , new webpack_copy([{
-            from: `${include_path}`
-          , to: `${output_path}`
-          , ignore: [ "*.js" ]
+        // Copy static assets
+      , new CopyWebpackPlugin([{
+            from: includePath
+          , to: outputPath
+          , ignore: [ "*.js", "*.jsx" ]
+          , transform (content, path) {
+                // Access to variables in static files
+                if (path.endsWith(".json")) {
+                    return Buffer.from(content.toString()
+                        .replace("EXTENSION_NAME", env.extensionName)
+                        .replace("EXTENSION_ID", env.extensionId)
+                        .replace("EXTENSION_VERSION", env.extensionVersion)
+                        .replace("MIRRORING_APP_ID", env.mirroringAppId));
+                }
+
+                return content;
+            }
         }])
     ]
-  , devtool: "eval-source-map"
+  , mode: "development"
   , module: {
-        loaders: [
+        rules: [
             {
                 test: /\.jsx?$/
-              , include: `${include_path}`
-              , loader: "babel-loader"
-              , options: {
-                    presets: [ "react" ]
-                  , plugins: [
-                        "transform-class-properties"
-                      , "transform-do-expressions"
-                      , "transform-object-rest-spread"
-                    ]
+              , include: `${includePath}`
+              , use: {
+                    loader: "babel-loader"
+                  , options: {
+                        presets: [
+                            "@babel/preset-react"
+                        ]
+                      , plugins: [
+                            "@babel/proposal-class-properties"
+                          , "@babel/proposal-do-expressions"
+                          , "@babel/proposal-object-rest-spread"
+                        ]
+                    }
                 }
             }
         ]

package.json

@@ -3,7 +3,9 @@
         "postinstall": "npm run postinstall:app && npm run postinstall:ext",
         "postinstall:app": "npm install ./app --prefix ./app",
         "postinstall:ext": "npm install ./ext --prefix ./ext",
-        "build": "npm run build --prefix ./app && npm run build --prefix ./ext --",
+        "build": "npm run build:app && npm run build:ext",
+        "build:app": "npm run build --prefix ./app",
+        "build:ext": "npm run build --prefix ./ext",
         "test": "jasmine --config=jasmine.json",
         "install-manifest": "npm run install-manifest --prefix ./app"
     },