Question

例如，如果我想向所有文件添加require("index.less")，如果文件不存在则忽略此行。我该怎么做（例如使用装载机）。

Answer 1

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

粗略的想法：

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

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

Answer 2

我最终做的是改进imports loader以添加一个选项，为每个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'
      }
    }
  ]
}

webpack中的可选依赖项

3 个答案: