Webpack中的动态需求

Question

我有文件目录。

/网络/公/ JS /核心

我的核心文件夹包括：模块，助手，配置，样式，core.js，base.js，service.js。

我使用webpack进行构建，在service.js中使用动态需求。

例如：

config.js

export default {
    modules: {
        validation: 'validation',
        async: 'asyncLoadContent',
        carousel: 'carousel',
        tab: 'tab',
        accordeon: 'accordeon',
        modal: 'modal',
        lightbox: 'lightbox',
        zoom: 'zoom',
        notification: 'notification',
        slider: 'slider',
        rates: 'rates'
    },
    helper: {
        event: 'event',
        css: 'css',
        error: 'error',
        transition: 'transition'
    }

}

service.js在此文件中，我递归地从配置文件中获取Json对象，并形成用于加载模块或帮助程序的路径。 因此，模块沿着路径/ core / helper定位，而模块沿着路径/ core / modules定位，即目录不同且路径是动态的。

registrationModule(config, option){

        for(let key in config){

            if(typeof config[key] == 'object' && !this.classes[key]){
                this.classes[key] = {};
                this.registrationModule(config[key], key);
            } else {

                let url = (option == 'modules') ? option + '/' + key + '/' + config[key] : option + '/' + config[key];

                //!!!!! PROBLEM !!!!!!!/
                let module = require("./" + url + '.js').default;

                this.setModule(key, option, module);
            }

        }

    }

在构建之前，我有警告

WARNING in ./web/public/js/core ^\.\/.*\.js$
Module not found: Error: a dependency to an entry point is not allowed
 @ ./web/public/js/core ^\.\/.*\.js$

在构建中，我看到：

var map = {
        "./base.js": 24,
        "./config/config.js": 26,
        "./helper/css.js": 30,
        "./helper/error.js": 27,
        "./helper/event.js": 31,
        "./helper/transition.js": 32,
        "./modules/accordeon/accordeon.js": 33,
        "./modules/accordeon/accordeon.md.js": 34,
        "./modules/async/asyncLoadContent.js": 35,
        "./modules/carousel/carousel.js": 36,
        "./modules/carousel/carousel.md.js": 37,
        "./modules/lightbox/lightbox.js": 38,
        "./modules/lightbox/lightbox.md.js": 39,
        "./modules/lightbox/lightbox.view.js": 40,
        "./modules/modal/modal.js": 41,
        "./modules/modal/modal.md.js": 42,
        "./modules/modal/modal.view.js": 43,
        "./modules/notification/notification.js": 44,
        "./modules/notification/notification.md.js": 45,
        "./modules/rates/rates.js": 46,
        "./modules/rates/rates.md.js": 47,
        "./modules/slider/slider.js": 48,
        "./modules/slider/slider.md.js": 49,
        "./modules/tab/tab.js": 50,
        "./modules/tab/tab.md.js": 51,
        "./modules/validation/validation.js": 52,
        "./modules/validation/validation.md.js": 53,
        "./modules/zoom/zoom.js": 54,
        "./modules/zoom/zoom.md.js": 55,
        "./modules/zoom/zoom.view.js": 56,
        "./service.js": 25
    }; 

地图包含：“ ./ base.js”：24，“ ./ service.js”：25。

我从控制台中的错误中了解到，但是如何解决呢？ 如何让webpack理解，以便它在动态形成路径时仅按照我想要的方式查找文件。

Answer 1

对于这种特定情况，您应该能够使用代码解决此问题，该代码使Webpack清楚地知道您只在乎助手和模块，例如

let module;
if (option === "modules") {
    module = require("./modules/" + key + '/' + config[key] + '.js');
} else if (option === "helper") {
    module = require("./helper/" + key + '.js');
} else {
    throw new Error("Unexpected option value;");
}

this.setModule(key, option, module.default);

因为require调用具有Webpack可以选择的特定前缀，所以它将知道您不在乎根级文件。

不过请注意，像这样构建自定义注册会使您的依赖图变得非常难以遵循，并且使使用此类代码的工作变得非常烦人。