webpack中的动态需求

Question

我有文件目录。

/web/public/js/core

我的核心文件夹包括：modules、helper、config、styl、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 可以选择它，它会知道你不关心根级文件。

但是请注意，像这样构建自定义注册会使您的依赖关系图非常难以遵循，并且使用这样的代码真的很烦人。