webpack可以用动态路径静态导入吗答案

【问题标题】：Can webpack import staticly with a dynamic pathwebpack可以用动态路径静态导入吗
【发布时间】：2020-04-18 11:46:25
【问题描述】：

我有一个使用 TypeScript、Webpack、React 和 Gatsby 的项目，我想导入一大堆不同分辨率和 webp 版本的图像以提高性能。

我已经开始导入我的图片了：

import Project1Screenshot640 from './images/projects/screenshots/640/project1.jpg'
import Project1Screenshot1280 from './images/projects/screenshots/1280/project1.jpg'
import Project1Screenshot1526 from './images/projects/screenshots/1526/project1.jpg'
import Project1Screenshot640Webp from './images/projects/screenshots/640/project1.webp'
import Project1Screenshot1280Webp from './images/projects/screenshots/1280/project1.webp'
import Project1Screenshot1526Webp from './images/projects/screenshots/1526/project1.webp'
// ... I've skipped the rest because it is a long list of imports.

const projects = {
  'project-1': {
    title: 'Project 1',
    screenshot: {
      640: [Project1Screenshot640, Project1Screenshot640Webp],
      1280: [Project1Screenshot1280, Project1Screenshot1280Webp],
      1526: [Project1Screenshot1526, Project1Screenshot1526Webp],
    },
  },
  // ...
}

但我意识到这是非常不可维护的，在编译时生成这些导入会更好。

像下面这样会更好...

const generateProject = (id, title) => {
  import Screenshot640 from `./images/projects/screenshots/640/${id}.jpg`
  // ...
  import Screenshot640Webp from `./images/projects/screenshots/640/${id}.webp`
  // ...

  return {
    title,
    screenshot: [
      640: [Screenshot640, Screenshot640Webp],
      // ...
    ],
  }
}

const projects = {
  'project-1': generateProject('project-1', 'Project 1')
}

但不幸的是，如果不使用 const Screenshot640 = await import('...') 异步执行，您将无法使用动态路径（我知道）导入。

如果无论如何我可以在构建期间使用 webpack/gatsby 生成这个项目导入列表，这将在编译后的代码中可用？

【问题讨论】：

标签： typescript webpack import gatsby dynamic-import

【解决方案1】：

您可以使用require 代替import，这将在编译时延迟加载。

要求：编译时延迟加载。
import：运行时延迟加载。

来源：https://github.com/webpack/webpack/issues/6125#issuecomment-351642743

【讨论】：