webpack - 使用 Webpack 动态循环魔术注释

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 不知道要生成什么 bundle 文件，因为它处于循环中。

这可能吗？如果可能的话，我的捆绑包最终将达到 3kb 左右，从而提高性能。

标签： webpackwebpack-4