Question

我有文件目录。

/网络/公共/ JS /芯

我的核心文件夹包括：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对象，我递归地遍历它并形成加载模块或帮助器的路径。因此，模块位于路径/核心/帮助器上，模块沿路径/核心/模块，即目录不同，路径是动态的。

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
    };

地图包括：＆＃34; ./ base.js＆＃34;：24，＆＃34; ./ service.js＆＃34;：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可以获取的特定前缀，所以它会知道您不关心根级文件。

但是请注意，构建这样的自定义注册会使您的依赖图超级难以理解，并且使用这样的代码非常烦人。

webpack中的动态需求

1 个答案: