webpack中的可选依赖项

Question

例如，如果我想在所有文件中添加require("index.less")，并且如果文件不存在，则忽略此行。我该怎么做（包括使用加载器）？

- Vitali Zaidman

Answer 1

一种选择是设置 require.context，然后根据它来检查文件是否存在。

大致想法：

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

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

- Juho Vepsäläinen

Answer 2

我最终所做的是改进导入加载器，添加一个选项，如果存在同名的less文件，则为每个jsx文件导入该文件。

我的改进版import loader：https://github.com/welldone-software/imports-loader 拉取请求：https://github.com/webpack/imports-loader/pull/12 例如，在与mainview.jsx相同的目录中放置mainview.less，将在jsx文件顶部添加require("mainview.less")导入。

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

- Vitali Zaidman

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'
      }
    }
  ]
}

- user1355585