Is there anyway only minify less and react components for node_modules with webpack without bundling them?

Question

I'm creating a node_modules package with many React components that can be installed into node_modules folder later on, each component has got a few import js and less ...

I'd like to minify each component separately, make it es5 module exported to be used in react-app separately, minify them separately (both javascript and less) without bundling imported modules from npm (they stay required)...

I tried some ways which kind of working, but any good way to stop webpack bundling? how the webpack.config.js gonna look like in this case?

Answer 1

You could export webpack config as an array of configs for each modules:

module.exports = [
  {
    entry: './src/apple',
    mode: 'production',
    output: {
      library: 'apple',
      libraryTarget: 'umd',
      filename: 'apple.min.js',
    },
  },
  {
    entry: './src/orange',
    mode: 'production',
    output: {
      library: 'orange',
      libraryTarget: 'umd',
      filename: 'orange.min.js',
    },
  },
];

Note this is a webpack 4 example, but previous versions also allow an array (they don't have mode though). If there is shared config you can of course spread/merge in shared parts for each item.