Declarative webpack config

webpack.config.js

const FILE_TYPES = {
  JS: /\.js$/,
  CSS: /\.css$/,
  SCSS: /\.scss$/,
  TS: /\.tsx?$/,
};
const FOLDERS = {
  APP: path.join(__dirname, './src'),
  NODE_MODULES: path.join(__dirname, './node_modules'),
};

matchFileType(FILE_TYPES.JS, 'js files', () => {
  matchFolder(FOLDERS.APP, 'js files in app', () => {
    production(() => {
      declareLoader('loader for js files in app', () => {
        return {
          loader: 'babel-loader',
          options: {},
        };
      });

      declarePlugin('plugin for js files in app', () => {
        return [
          new HappyPackPlugin({}),
        ];
      });
    });
    
    development(() => {
      declareLoader('loader for js files in app', () => {
        return {
          loader: 'babel-loader',
          options: {},
        }
      });
    });
  });
  
  matchFolder(FOLDERS.NODE_MODULES, 'js files in node_modules', () => {
    allEnv(() => {
      declareLoader('loader for js files in node_modules', () => {
        return {
          loader: 'babel-loader',
          options: {},
        }
      });
    });
  });
});

matchFileType(FILE_TYPES.CSS, 'css files', () => {
  allFolder(() => {
    allEnv(() => {
      declareLoader('loader for js files in node_modules', () => {
        return {
          loader: 'css-loader',
          options: {},
        }
      });
    });
  });
});

// can use label to set which loader/plugin should come before another
definePriority('loader for js files in app', 'js files in app');