webpack 中的可选依赖项

Posted 2023-02-24

【中文标题】webpack 中的可选依赖项

【英文标题】：Optional dependencies in webpack

【发布时间】：2015-11-15 06:29:07

【问题描述】：

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

【参考方案1】：

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

粗略的想法：

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

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

【参考方案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' 
]

【参考方案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'
      
    
  ]