require - webpack のオプションの依存関係

Question

たとえば、require("index.less")すべてのファイルに追加し、ファイルが存在しない場合はこの行を無視する場合などです。どうすればいいですか（たとえば、ローダーの使用を含む）。

Answer 1

1 つのオプションは、 require.contextを設定し、それに対してファイルが存在するかどうかを確認することです。

大まかなアイデア：

var req = require.context('./', false, /^index.less$/);

if(req.keys().includes('./index.less')) {
  req('./index.less');
}

Answer 2

私がやったのは、インポートローダーを改善して、同じ名前のファイルが存在する場合はlessすべてのファイルをインポートするオプションを追加することでした。jsx

私の改善import loader：https://github.com/welldone-software/imports-loader

プル リクエスト: https://github.com/webpack/imports-loader/pull/12

たとえばmainview.less、 と同じディレクトリにドロップすると、ファイルの先頭にインポートmainview.jsxが追加されます。require("mainview.less")jsx

loaders: [
    { test: /\.jsx?$/, loaders: ['imports?null=[./{name}.less]', 'react-hot', 'babel'] },
    { test: /\.less$/, loader: 'style!css!less' }
]

Answer 3

imports-loaderでincludesトリックを行います：

{
  test: /\/index\.jsx$/,
  include: (modulePath) => fs.existsSync(path.join(path.dirname(modulePath), 'style.sass')),
  use: [
    {
      loader: 'imports-loader',
      options: {
        imports: 'side-effects ./style.sass'
      }
    }
  ]
}