support for webpack config overrides and addition

bin/wpds-scripts.js

@@ -5,7 +5,6 @@ process.on("unhandledRejection", err => {
   throw err;
 });
 
-const path = require("path");
 const chalk = require("chalk");
 
 process.env.LOG_PREFIX = `[${chalk.magenta("wpds")}]`;
@@ -15,7 +14,15 @@ const args = require("minimist")(process.argv.slice(2));
 const config = require("../config/wpds-scripts.config");
 
 if (config.verbose) {
-  console.log(LOG_PREFIX, "Final configuration:", config);
+  console.log(LOG_PREFIX, chalk.yellow("Verbose mode..."));
+  const logConfig = {
+    ...config,
+    ...{
+      customWebpackConfig: "hidden from console",
+      customWebpackDevConfig: "hidden from console"
+    }
+  };
+  console.log(LOG_PREFIX, "Final configuration:", logConfig);
 }
 if (process.env.DEFAULT_CONFIG) {
   console.log(LOG_PREFIX, "Loaded default config");
@@ -27,27 +34,11 @@ if (process.env.DEFAULT_CONFIG) {
   console.log(LOG_PREFIX, "Loaded custom config");
 }
 
-// entry files
-let filePaths = args.e || args.entryFiles || config.entryFiles;
-if (typeof filePaths === "string") {
-  filePaths = [filePaths];
-}
-
 // set config
 process.env.PORT = parseInt(args.p || args.port, 10) || config.port;
 process.env.HOST = args.h || args.host || config.host;
 process.env.PROXY = args.P || args.proxy || config.proxy;
 process.env.PUBLIC_PATH = args.publicPath || config.publicPath;
-process.env.FILES = filePaths.map(p => {
-  console.log(
-    `${LOG_PREFIX}[${chalk.cyan("loading")}]`,
-    p.replace(process.cwd(), "")
-  );
-  if (!path.isAbsolute(p)) {
-    p = path.resolve(process.cwd(), p);
-  }
-  return p;
-});
 
 const script = args._[0];
 

config/webpack.config.js

@@ -1,27 +1,32 @@
 const path = require("path");
-const externals = require("./externals");
+const chalk = require("chalk");
 const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
-const PUBLIC_PATH = process.env.PUBLIC_PATH;
-const files = process.env.FILES.split(",");
-
-const filesToObj = files => {
-  const rv = {};
-  for (let i = 0; i < files.length; ++i) {
-    const basename = path.basename(files[i]).replace(/\.[^/.]+$/, "");
-    rv[basename] = files[i];
-  }
-  return rv;
-};
+const externals = require("./externals");
+const config = require("./wpds-scripts.config");
 
-const entryPoints = filesToObj(files);
+const PUBLIC_PATH = process.env.PUBLIC_PATH;
+const LOG_PREFIX = process.env.LOG_PREFIX;
 
-module.exports = {
+let webpackConfig = {
   mode: process.env.NODE_ENV,
-  entry: entryPoints,
+  entry: () => {
+    const files = config.entryFiles;
+    const filesObj = {};
+    for (let i = 0; i < files.length; ++i) {
+      const basename = path
+        .basename(files[i])
+        // remove file extension
+        .replace(/\.[^/.]+$/, "")
+        // only keep letters
+        .replace(/[^a-zA-Z]+/g, "");
+      filesObj[basename] = files[i];
+    }
+    return filesObj;
+  },
   devtool: "source-map",
-  externals: externals,
+  externals: externals.concat(config.customExternals),
   output: {
     publicPath: `${PUBLIC_PATH}/assets/`,
     path: path.resolve(process.cwd(), "assets"),
@@ -92,6 +97,21 @@ module.exports = {
           outputPath: "fonts"
         }
       }
-    ]
+    ].concat(config.customRules)
   }
 };
+
+if (config.customWebpackConfig) {
+  console.log(
+    LOG_PREFIX,
+    chalk.yellow("Careful, you are overriding the default webpack config!")
+  );
+  console.log(LOG_PREFIX, chalk.yellow("This can easily break the process!"));
+  webpackConfig = { ...webpackConfig, ...config.customWebpackConfig };
+}
+
+if (config.verbose) {
+  console.log(LOG_PREFIX, "Final webpack config:", webpackConfig);
+}
+
+module.exports = webpackConfig;

config/wpds-scripts.config.js

@@ -14,7 +14,11 @@ let config = {
   host: "localhost",
   proxy: "http://localhost:8000",
   publicPath: `/wp-content/themes/${path.basename(process.cwd())}`,
-  entryFiles: [`${process.cwd()}/src/javascripts/main.js`]
+  entryFiles: [`${process.cwd()}/src/javascripts/main.js`],
+  customRules: [],
+  customExternals: [],
+  customWebpackConfig: false,
+  customWebpackDevConfig: false
 };
 
 // merge custom config

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@josias-r/wpds-scripts",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "WordPress Dev Server scripts",
   "bin": {
     "wpds-scripts": "./bin/wpds-scripts.js"
@@ -15,7 +15,8 @@
   "keywords": [
     "webpack",
     "webpack-dev-server",
-    "wpds"
+    "wpds",
+    "wordpress-dev-server"
   ],
   "author": "Josias Ribi",
   "license": "ISC",

scripts/start.js

@@ -12,7 +12,8 @@ const WebpackDevServer = require("webpack-dev-server");
 const zlib = require("zlib");
 const chokidar = require("chokidar");
 const chalk = require("chalk");
-const config = require("../config/webpack.config");
+const config = require("../config/wpds-scripts.config");
+const webpackConfig = require("../config/webpack.config");
 
 const LOG_PREFIX = process.env.LOG_PREFIX;
 const PORT = process.env.PORT;
@@ -67,7 +68,7 @@ const proxyRes = (proxyRes, req, res) => {
   });
 };
 
-const server = new WebpackDevServer(webpack(config), {
+let devServerConfig = {
   // noInfo: true,
   stats: "minimal",
   before: (app, server) => {
@@ -86,7 +87,6 @@ const server = new WebpackDevServer(webpack(config), {
       });
   },
   publicPath: `${PUBLIC_PATH}/assets/`,
-  // contentBase: path.resolve(process.cwd(), "src"),
   hot: true,
   compress: true,
   proxy: {
@@ -97,7 +97,24 @@ const server = new WebpackDevServer(webpack(config), {
       onProxyRes: proxyRes
     }
   }
-});
+};
+
+if (config.customWebpackConfig) {
+  console.log(
+    LOG_PREFIX,
+    chalk.yellow(
+      "Careful, you are overriding the default webpack dev server config!"
+    )
+  );
+  console.log(LOG_PREFIX, chalk.yellow("This can easily break the process!"));
+  devServerConfig = { ...devServerConfig, ...config.customWebpackDevConfig };
+}
+
+if (config.verbose) {
+  console.log(LOG_PREFIX, "Final webpack dev server config:", devServerConfig);
+}
+
+const server = new WebpackDevServer(webpack(webpackConfig), devServerConfig);
 server.listen(PORT, HOST, function(err) {
   if (err) {
     console.log(LOG_PREFIX, chalk.red(err));