How to put different entry in the webpack.config.js?

Grafana k6 Converters & Integrations
1

I am using the template project that they have for typescript and I would like to modify it to put the different tests in different folders so that it is more organized. I have modified the webpack.config.js file with the following change:

mode: 'production',
  entry: GlobEntries('./src/*test*.ts'), // Generates multiple entry for each test
  output: {
    path: path.join(__dirname, 'dist'),
    libraryTarget: 'commonjs',
    filename: '[name].js',
  },
  mode: 'production',
  entry: GlobEntries('./src/PlaySpace/Login/Guest/*test*.ts'), // Generates multiple entry for each test
  output: {
    path: path.join(__dirname, 'dist/PlaySpace/Login/Guest'),
    libraryTarget: 'commonjs',
    filename: '[name].js',
  },

But it only modifies the tests of the last mode. What I want to do can be done?

3

Hey @victor.delgado :wave:

At a glance, you’re redefining the mode, entry, and output twice. If it’s the case, I assume that one overrides the other. You might want to have a single set of each key and define separate entries for each path containing tests.

Also, I’m unfamiliar with GlobEntries, but assuming it does what its name hints, you might be able to use a larger glob statement such as GlobEntries('./src/**/*test*.ts')? (meaning go through the src/ folder recursively, and find all files containing test in their name and ending with the .ts extension?

The webpack.config.js file from our AWS jslib could also prove useful.

Let me know if that was helpful and if you have any other questions :bowing_man:

PS: I’m by no way a Typescript nor Webpack ninja :ninja:

1 Like
4

It has worked seems to be to find all test.ts files using ./src/**/test.ts. But the files are still put in the same folder, not in separate directories, which is what we want to keep the project tidy.

PS: Thank you for your comment, it is very kind.

5

I was able to solve the problem by modifying the webpack.config.js file like this:

const path = require('path');
const fs = require('fs');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = (env) => {
  // Function to get all the files in a folder recursively
  function getFiles(dir) {
    const dirents = fs.readdirSync(dir, { withFileTypes: true });
    const files = dirents.map((dirent) => {
      const res = path.join(dir, dirent.name);
      return dirent.isDirectory() ? getFiles(res) : res;
    });
    return files.flat();
  }

  const entries = {};

  // Array of folder to search for files
  const folders = ['PlaySpace'];

  // Iterate all files and attach them to the entries object
  folders.forEach(folder => {
    const files = getFiles(`./src/${folder}/`);

    files.forEach(file => {
      entries[file.replace(/src\\|.ts/g, '')] = file.replace('src\\', './');
    });
  });

  const commonConfig = {
    mode: 'production',
    context: path.resolve(__dirname, 'src'), // sets src as the base project path
    entry: entries, // Generates multiple entry for each test
    output: {
      path: path.resolve(__dirname, 'dist'),
      libraryTarget: 'commonjs',
      filename: '[name].js',
    },

    resolve: {
      extensions: ['.ts', '.js'],

    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: 'babel-loader',
          exclude: /node_modules/,
        },
      ],
    },
    target: 'web',
    externals: /^(k6|https?\:\/\/)(\/.*)?/,
    // Generate map files for compiled scripts
    devtool: "source-map",
    stats: {
      colors: true,
    },
    plugins: [
      new CleanWebpackPlugin(),
      // Copy assets to the destination folder
      // see `src/post-file-test.ts` for an test example using an asset
      new CopyPlugin({
        patterns: [{
          from: path.resolve(__dirname, 'assets'),
          noErrorOnMissing: true
        }],
      }),
    ],
    optimization: {
      // Don't minimize, as it's not used in the browser
      minimize: false,
    },
  }

  return commonConfig;
}
3 Likes
6

Hey @victor.delgado

Glad you could find a working solution to your issue :tada: :bowing_man:

1 Like
8

Hey, @victor.delgado !

I would like to know if your solution can work for a scenario where there’s a parent folder and inside of it there’re multiple folders with the tests.

For example.-

.
└── tests/
    └── loading/
        ├── folder1/
        │   ├── featureA/
        │   │   └── testA.spec.ts
        │   └── featureB/
        │       └── testB.spec.ts
        └── folder2/
            ├── featureY/
            │   └── testY.spec.ts
            └── featureZ/
                └── testZ.spec.ts

TIA!