webpack中的可选依赖项

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

我最后做的是改进导入加载器，添加一个选项，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' }
]