Динамически перебирая магические комментарии с Webpack - PullRequest
Новая
       8

Динамически перебирая магические комментарии с Webpack

0 голосов
/ 06 ноября 2018

Таким образом, проблема, с которой я сталкиваюсь, состоит в том, чтобы записать этот повторяющийся код более 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}`));
}

И это нормально, мой пакет веб-пакетов создает 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. Это прекрасно работает, когда я не использую строку шаблона.

Второй веб-пакет не знает, какой файл пакета нужно сгенерировать, потому что он находится в цикле.

это возможно? Мой пакет будет около 3 КБ, если это будет возможно, поэтому улучшение производительности.

...