如何在Webpack 3.10中使用Chrome原生dynamic import()？

刚好碰到过相同的需求，下面给你两种可行的解决办法，按需选择：

精准控制单个import（推荐） #

如果你只想让某几个import()语句交给Chrome原生执行，直接给它们加上Webpack的魔法注释就行：

const m = await import(/* webpackIgnore: true */ "./path/foo")

添加/* webpackIgnore: true */后，Webpack就会彻底忽略这个动态导入操作，不会对它做代码分割、打包等处理，原封不动地把原生import()语法输出给浏览器。

全局禁用所有动态导入处理（慎用） #

要是你项目里所有的import()都想交给原生处理，可以在Webpack配置文件里修改module.parser的配置：

module.exports = {
  // ...你的其他Webpack配置
  module: {
    parser: {
      javascript: {
        dynamicImport: false, // 全局禁用Webpack对动态导入的处理
      },
    },
  },
};

不过这个方式要谨慎使用，因为它会影响所有动态导入语句，可能导致原本需要Webpack代码分割的功能失效。

最后提醒一下：要确保你的项目已经开启了ES模块支持——比如在package.json里设置"type": "module"，或者HTML里的脚本标签加上type="module"属性，这样Chrome才能正确解析原生的动态导入语法。

内容的提问来源于stack exchange，提问作者Jonas Kello