assume direct control of webpack config

Instead of overriding rules we don't want by matching the test exactly,
we now explicitly delete rules we don't want before adding any of our
custom rules.

electron-webpack.json5

@@ -1,9 +1,9 @@
 {
     "main": {
-        "webpackConfig": "webpack.main.additions.js"
+        "webpackConfig": "webpack.main.js"
     },
     "renderer": {
         "template": "src/renderer/index.html",
-        "webpackConfig": "webpack.renderer.additions.js"
+        "webpackConfig": "webpack.renderer.js"
     }
 }

webpack.main.additions.js

@@ -1,11 +0,0 @@
-const path = require('path');
-
-const makeConfig = require('./webpack.makeConfig.js');
-
-module.exports = makeConfig({
-    name: 'main',
-    useReact: false,
-    babelPaths: [
-        path.resolve(__dirname, 'src', 'main')
-    ]
-});

webpack.main.js

@@ -0,0 +1,16 @@
+const path = require('path');
+
+const makeConfig = require('./webpack.makeConfig.js');
+
+module.exports = defaultConfig =>
+    makeConfig(
+        defaultConfig,
+        {
+            name: 'main',
+            useReact: false,
+            disableDefaultRulesForExtensions: ['js'],
+            babelPaths: [
+                path.resolve(__dirname, 'src', 'main')
+            ]
+        }
+    );

webpack.makeConfig.js

@@ -2,16 +2,19 @@ const childProcess = require('child_process');
 
 const electronPath = require('electron');
 const webpack = require('webpack');
+const merge = require('webpack-merge');
+
+// PostCss
+const autoprefixer = require('autoprefixer');
+const postcssVars = require('postcss-simple-vars');
+const postcssImport = require('postcss-import');
 
 const isProduction = (process.env.NODE_ENV === 'production');
 
 const electronVersion = childProcess.execSync(`${electronPath} --version`, {encoding: 'utf8'}).trim();
 console.log(`Targeting Electron ${electronVersion}`); // eslint-disable-line no-console
 
-const makeConfig = function (options) {
-    // eslint-disable-next-line no-console
-    console.log(`Module "${options.name}" building in production mode? ${isProduction}`);
-
+const makeConfig = function (defaultConfig, options) {
     const babelOptions = {
         // Explicitly disable babelrc so we don't catch various config in much lower dependencies.
         babelrc: false,
@@ -33,20 +36,31 @@ const makeConfig = function (options) {
         }]);
     }
 
-    return {
+    // TODO: consider adjusting these rules instead of discarding them in at least some cases
+    if (options.disableDefaultRulesForExtensions) {
+        defaultConfig.module.rules = defaultConfig.module.rules.filter(rule => {
+            if (!(rule.test instanceof RegExp)) {
+                // currently we don't support overriding other kinds of rules
+                return true;
+            }
+            // disable default rules for any file extension listed here
+            // we will handle these files in some other way (see below)
+            // OR we want to avoid any processing at all (such as with fonts)
+            const shouldDisable = options.disableDefaultRulesForExtensions.some(
+                ext => rule.test.test(`test.${ext}`)
+            );
+            if (shouldDisable) {
+                console.log(`${options.name}: Discarding electron-webpack default rule for ${rule.test}`);
+            }
+            return !shouldDisable;
+        });
+    }
+
+    return merge.smart(defaultConfig, {
         devtool: 'cheap-module-eval-source-map',
         mode: isProduction ? 'production' : 'development',
         module: {
             rules: [
-                // Override the *.js defaults from electron-webpack
-                // The test/include/exclude must match the defaults exactly for webpack-merge to do the override
-                {
-                    test: /\.js$/,
-                    exclude: /(node_modules|bower_components)/,
-                    loader: 'babel-loader',
-                    options: babelOptions
-                },
-                // Add a new rule for the other files we want to run through babel
                 {
                     test: sourceFileTest,
                     include: options.babelPaths,
@@ -57,6 +71,39 @@ const makeConfig = function (options) {
                     test: sourceFileTest,
                     loader: 'source-map-loader',
                     enforce: 'pre'
+                },
+                { // coped from scratch-gui
+                    test: /\.css$/,
+                    use: [{
+                        loader: 'style-loader'
+                    }, {
+                        loader: 'css-loader',
+                        options: {
+                            modules: true,
+                            importLoaders: 1,
+                            localIdentName: '[name]_[local]_[hash:base64:5]',
+                            camelCase: true
+                        }
+                    }, {
+                        loader: 'postcss-loader',
+                        options: {
+                            ident: 'postcss',
+                            plugins: function () {
+                                return [
+                                    postcssImport,
+                                    postcssVars,
+                                    autoprefixer
+                                ];
+                            }
+                        }
+                    }]
+                },
+                {
+                    test: /\.(svg|png|wav|gif|jpg)$/,
+                    loader: 'file-loader',
+                    options: {
+                        outputPath: 'static/assets/'
+                    }
                 }
             ]
         },
@@ -69,7 +116,7 @@ const makeConfig = function (options) {
             cacheWithContext: false,
             symlinks: false
         }
-    };
+    });
 };
 
 module.exports = makeConfig;

webpack.renderer.additions.js

@@ -1,19 +0,0 @@
-const path = require('path');
-
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-
-const makeConfig = require('./webpack.makeConfig.js');
-
-module.exports = makeConfig({
-    name: 'renderer',
-    useReact: true,
-    babelPaths: [
-        path.resolve(__dirname, 'src', 'renderer')
-    ],
-    plugins: [
-        new CopyWebpackPlugin([{
-            from: path.resolve(__dirname, 'node_modules', 'scratch-gui', 'dist', 'static'),
-            to: 'static'
-        }])
-    ]
-});

webpack.renderer.js

@@ -0,0 +1,24 @@
+const path = require('path');
+
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+
+const makeConfig = require('./webpack.makeConfig.js');
+
+module.exports = defaultConfig =>
+    makeConfig(
+        defaultConfig,
+        {
+            name: 'renderer',
+            useReact: true,
+            disableDefaultRulesForExtensions: ['js', 'jsx', 'css', 'svg', 'png', 'wav', 'gif', 'jpg'],
+            babelPaths: [
+                path.resolve(__dirname, 'src', 'renderer')
+            ],
+            plugins: [
+                new CopyWebpackPlugin([{
+                    from: path.resolve(__dirname, 'node_modules', 'scratch-gui', 'dist', 'static'),
+                    to: 'static'
+                }])
+            ]
+        }
+    );