You can customize the webpack configuration of a theme by editing its webpack.config.js which should look like this if you have not made any adjustments yet:

const { webpackConfig } = require("@coremedia/theme-utils");

module.exports = (env, argv) => {
  const config = webpackConfig(env, argv);

  // ...

  return config;
};

The imported method webpackConfig will generate our default configuration provided by the package @coremedia/theme-utils. You can simply extend this configuration by modifying the JavaScript Object that is returned by the function. This following example shows how to copy additional files:

const CopyWebpackPlugin = require("copy-webpack-plugin");
const path = require("path");
const { webpackConfig } = require("@coremedia/theme-utils");

module.exports = (env, argv) => {
  const config = webpackConfig(env, argv);

  // make sure that configuration for plugins exists
  config.plugins = config.plugins || [];

  config.plugins.push(
    new CopyWebpackPlugin({
    patterns: [
      {
        from: path.resolve("src/additional"),
        to: "additional",
        force: true,
        cacheTransform: true,
      }
    ]
  });

  return config;
};

This will copy all files located in your themes src/additional folder to the additional folder inside theme's target folder when the theme is build and also causes webpack to track changes to the files when using the Chapter 3, Web Development Workflow.

You can find more information about the configuration by checking the Webpack Documentation. More information about the CopyWebpackPlugin can be found here.

Note

If you do not want to use any of CoreMedia's preconfigured webpack configuration, you can remove the call to @coremedia/theme-utils (not recommended) and just start with an empty JavaScript Object ({}). In that case you are starting from scratch and need to configure webpack yourself to provide a proper theme structure that can be used by the theme-importer.