背景

◆ 正常情况下 webpack 的编译是从入口文件开始按照模块依赖关系仅对被依赖的文件做编译的。今天在某项目里增加了个模块文件写到一半保存而还没对其做 import ，但此时 webpackDevServer 就已经报出这个模块内的语法错误了。

解决与总结

◇ 根据堆栈信息追到再上一级的报错位置，来到下面这个函数，由于把动态 import 封装到函数，传入函数的值是个变量。

1
2
3
4
5
... ...
function importFromPath(pathName) {
  ... ...
  return import(`${pathName}`);
}

◇ 根据webpack 文档的说明并结合试验发现，此种情况下，该文件同层级及以下层级中的所有文件会被纳入 webpack 的编译与打包范围，从而导致了上述问题。

◇ 随着项目量级增加，当有更多不在依赖关系树上的文件通过此机制被引入后就会引起整体打包速度变慢和打包体积增大。所幸 webpack 针对 import()默认会创建一个新的 chunk 将其分离到单独的 bundle ，不会在打包结果部署后还影响其他模块的载入速度。

◇ webpack 提供了magic-comments用于配置处理动态 import()的行为。其中的”webpackInclude”能限定搜索动态模块的范围，可以解决我的问题。

◇ 因此在 webapck 中使用”import(变量)”时最好增加”webpackInclude”注释，以防止无关文件对打包的影响。