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

我最后做的是改进 imports loader 以添加一个选项，以便为每个 jsx 具有相同名称的文件（如果存在）导入一个 less 文件。

我改进的import loader：https://github.com/welldone-software/imports-loader

拉取请求：https://github.com/webpack/imports-loader/pull/12

例如，将 mainview.less 放入与 mainview.jsx 相同的目录中，会在 jsx 文件的顶部添加一个 require("mainview.less") 导入：

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 中的可选依赖项

Optional dependencies in webpack

require

ecmascript-6

webpack

ecmascript-2016