Question

以下是我正在处理的网站的设置：

我有多种类型的网页。每个页面都有一个（已知的）js视图（组件），封装在模块中。对于每种页面类型，我都会创建自己的入口点。以前我使用RequireJS和rjs进行捆绑，所以我有一个特殊的模块（称为＃39; loader＆＃39;），可以加载和初始化每个视图。

基本上，我有这样的结构

-news.js
-homepage.js
-components
    |
    -header.js
    -menu.js
    -search.js
    -article.js
    -loader.js

和我的news.js是

require('components/header');
require('components/search');
require('components/article');

var loader = require('components/loader');

loader.initAll();

和我的homepage.js是

require('components/header');
require('components/search');
require('components/menu');

var loader = require('components/loader');

loader.initAll();

每个组件看起来像

<div class="js-component" data-component="components/article"></div>

在loader.js中，我希望看到类似

的内容

module.exports = {
    initAll: function () {
        // get all components on the page
        var components = document.querySelectorAll('.js-component');

        components.forEach(function(component) {
            component.name = component.getAttribute('data-component');

            // next is obviously not working with webpack, but is what I need
            require(component.name).init();
        })
    }
}

我应该如何使用webpack进行组织？

如何使用webpack动态加载和初始化模块

0 个答案: