requireの中身を変数を含んだ文字列にする【webpack】

requireの中身に変数が入っているとエラーになる。
例えば画像ファイルのsrcを取得してImageインスタンスを作りたい時に、次のように書くと怒られる。

index.ts

/*ダメなパターン*/
const path = './images/';
const filename = 'image.png';
const src = require(path + filename);
const image = new Image();
image.src = src;

怒られ方はこう。

WARNING in ./src/index.ts 43:12-34
Critical dependency: the request of a dependency is an expression

ちなみに怒られるだけでなく、require自体もできない。

怒られないためには、ルートからのパスをハードコードして、その中に変数を入れる必要がある。

index.ts

/*OKなパターン*/
const path = 'images/';
const filename = 'image.png';
const src = require('/src/' + path + filename);
const image = new Image();
image.src = src;

ただしフォルダ構成は次の通り。

root/
  ┣ index.html
  ┣ dist/
  ┣ src/
      ┠ index.ts
      ┗images/
          └ image.png
  ┣ webpack.config.js
  ┣ tsconfig.json
  ┣ package.json
  ┣ package-lock.json
  ┗ node_modules/

webpackのconfigは次の通り。
webpack5を使っているため、output.assetModuleFilenameとmodule.rulesをこんな感じにするとdist/images/に画像ファイルを入れてくれる。

webpack.config.js

const path = require('path');
module.exports{
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    assetModuleFilename: 'images/[name][ext]'
  },
  module: {
    rules: [
      /*
　　　　　　tsとかcssとかのローダー設定略
　　　*/
      {
        test: /\.(png|jpg|gif)$/i,
        type: 'asset/resource'
      }

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

なんらかのインジェクションを怖がっているが故にWarningを出してるのかなあと思う。

参考：https://coderedirect.com/questions/199802/critical-dependencies-the-request-of-a-dependency-is-an-expression-webpack