Question

我目前正尝试切换到webpack。我的项目结构与此类似：

node_modules
    @my-namespace/moduleA
    @my-namespace/moduleB
    @my-namespace/moduleC
    ...

在每个模块中，我可能有以下目录

ui/controllers
        main.js
        edit.js

我的html结构将包含有关应以此格式加载的当前模块和控制器的信息：

<html data-module="moduleA" data-controller="edit">

在我的主要切入点，我有类似的东西。

const $ = require('jquery')
const moduleName = $('html').data().module
const controllerName = $('html').data().controller

const controller = require('/ui/controllers/' + moduleName + '/' + controllerName)

我如何预加载我的所有控制器（我知道我要搜索的所有模块），以便require('/ui/controllers/' + moduleName + '/' + controllerName)找到它们。

我想我可以完成这个写自己的插件，我已经看了ContextReplacementPlugin，似乎在result.resolveDependencies组合使用ContextElementDependency可能是解决方案。但是文档中没有太多相关信息。

我目前仍然坚持使用

中的部分

cmf.plugin('before-resolve', function(result, callback) {
   if (result.request == 'ui/controller') {
    // what do I need to do here so that 'after-resolve' is reached   

    return callback(null, result)
   } else {
     callback()
   }
})

这样我就可以在：

中添加所有依赖项

cmf.plugin('after-resolve', function(result, callback) {
})

Answer 1

我目前通过预处理步骤解决了这个问题。我搜索我想要与web pack结合的不同模块中的所有文件，将它们复制到临时构建目录，然后在找到的控制器上构建一个加载器，其结构如下：

<强> constroler-loader.js

const Promise = require('bluebird')

exports.get = function(controllerName, options) {
  return new Promise((resolve, reject) => {
    if (controllerName === 'moduleA/controllerA') {
      require.ensure(['./moduleA/controllerA'], function(require) {
        try {
          const controller = require('./moduleA/controllerA');
          resolve(controller(options));
        } catch (e) {
          reject(new Error('controller "' + controllerName + '" could not be created.'))
        }
      });
    } else if (controllerName === 'moduleA/controllerB') {
      require.ensure(['./moduleA/controllerB'], function(require) {
        try {
          const controller = require('./controllers/events/overview');
          resolve(controller(options));
        } catch (e) {
          reject(new Error('controller "' + controllerName + '" could not be created.'))
        }
      });
    } else {
      reject(new Error('controller "' + controllerName + '" not found.'));
    }
  })
}

之后，我在构建目录中运行webpack。

使用require在webpack中按变量加载已知文件

1 个答案: