How can I get webpack to emit its output to two locations?

Question

My current configuration is as follows:

output: {
  filename: 'bundle.js',
  path: OUT_DIR
},

However I need bundles.js to go to two directories?

Can I accomplish this by simply passing an array of directories to path?

Or do I need to do something more complex?

Currently I have a bash script cpll which I have to type in manually after each build and it is tedious.

Hopefully web pack has a configuration option to send the output to two or more locations.

Research

google search

This SO question is 4 years old and does not have what I am lookin for - so

The documentation does not mention a way to do it here - webpack.

If there is not a configuration option how can I have it run a bash command automatically?

I tried passing it an array of strings instead of a string and it crashed with the obvious error:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.output.path should be a string.

Passing an array will not work. Hmmm.

Trying another approach starting with a google - search

Brings up a possible solution - so

per request - complete exportFunc

const exportFunc = ( env ) => {
  console.log('webpack.config.js-exportFunc', OUT_DIR);
  return {
    entry: `${IN_DIR}/index.jsx`,
    output: {
      filename: 'bundle.js',
      path: '/Users/c/_top/ll-front/dist'
    },
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [ 'style-loader', 'css-loader' ]
        },
        {
          test: /\.jsx?/,
          include: IN_DIR,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react'],
              plugins: ['@babel/plugin-proposal-object-rest-spread', '@babel/plugin-proposal-class-properties'],
            }
          }
        }
      ]
    }
  };
};

module.exports = exportFunc;

sdgluck · Accepted Answer · 2020-02-28T16:33:13.227

You can use webpack's multi-compiler mode by exporting an array of configs.

As in the docs:

Instead of exporting a single configuration object/function, you may export multiple configurations (multiple functions are supported since webpack 3.1.0). When running webpack, all configurations are built.

For example:

const config = {
  // your webpack config
}

const outputPaths = ["path/one", "path/two"]

module.exports = outputPaths.map(outputPath => {
  return {
    ...config,
    name: outputPath,
    output: {
      ...config.output,
      path: path.resolve(__dirname, outputPath)
    }
  }
})

As you're using a function config you can do something like this:

const outputPaths = ["path/one", "path/two"]

module.exports = outputPaths.map(outputPath => {
  return env => {
    return {
      entry: `${IN_DIR}/index.jsx`,
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, outputPath)
      },
      module: {
        rules: [
          {
            test: /\.css$/,
            use: [ 'style-loader', 'css-loader' ]
          },
          {
            test: /\.jsx?/,
            include: IN_DIR,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env', '@babel/preset-react'],
                plugins: ['@babel/plugin-proposal-object-rest-spread', '@babel/plugin-proposal-class-properties'],
              }
            }
          }
        ]
      }
    };
  }
})

It looks like I would need to re-factor my entire configuration file with this method? — jennifer, Feb 28 '20 at 16:27
@j.a. Why? At some point you have an object which is your webpack config. Instead of exporting that directly, do as above and export an array of configs which use your existing webpack config as the "base" config. Share you webpack config and I'll show you. — sdgluck, Feb 28 '20 at 16:29

score 0 · Answer 2 · answered Feb 28 '20 at 16:30

You could use multiple configurations instead. Here's the webpack documentation link.

To avoid code duplicaion consider your current config as an object. Then duplicate that object and override the output section of the duplicated object. Finally put both objects into an array. Use that array as your new config.

var yourCurrentConfig = {...};

var secondaryDestinationConfig = Object.assign(yourCurrentConfig, {
    output: {
        path: {
            filename: 'bundle.js',
            path: SECONDARY_DIR
        } 
    }
});

var newConfig = [
   yourCurrentConfig, secondaryDestinationConfig
];

How can I get webpack to emit its output to two locations?

2 Answers2