Question

所以我遇到的问题是在我的入口文件中编写了30遍以上的重复代码，这使我的入口文件很大。

示例：

const component = document.querySelector('[data-component]');

if (component !== null) {
  import(/* webpackChunkName: "component" */ 'path/to/component').then(componentModule =>{
 componentModule.default.init();
})
    .catch(err => console.error(`Error in: Samples - ${err}`));
}

很好，我的webpack捆绑包创建了component.bundle.js，但是当我尝试实现此功能以进行循环时，我无法使其正常运行。这是我的方法：

const components = {
  component1: {
    el: document.querySelector('[data-component]'),
    fileName: 'component',
    path: '/path/to/'
  }
};

function importModule(el, fileName, path) {
  if (el !== null) {
      import(/* webpackChunkName: "[request]" */ '${path}${fileName}').then(componentModule =>{
        componentModule.default.init();
      })
        .catch(err => console.error(`Error in: ${fileName} - ${err}`));
  }
}

Object.keys(components).forEach(key => {
  const { el, fileName, path } = component[key];
  importModule(el, fileName, path);
});

我得到的第一个错误是文件扩展名。为了保持一致性，我有一个与该组件相同名称的cshtml文件，它将它加载到我的js文件中。当我不使用模板字符串时，这可以正常工作。

第二个webpack不知道要生成哪个捆绑文件，因为它处于循环状态。

这可能吗？如果可能的话，我的捆绑包最终将约为3kb，因此可以提高性能。

使用Webpack动态遍历魔术注释

0 个答案: