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 可以获取的特定前缀，它会知道你不关心根级文件。

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

webpack 中的动态需求

Dynamic require in webpack

javascript

node.js

ecmascript-6

webpack

webpack-2