问题记录-前端开发避坑(4)--webpack打包相关

问题1

使用webpack打包ES6模块，报错：

TypeError: Cannot read property 'properties' of undefined (reading 'default')

问题分析

使用ES6语法导入其他模块时，相同路径下的其他模块需要一一导入，而不能通过路径下的再导出文件来导入。举例：
模块路径为：src/modules/...
路径下有两个模块 A.ts 和 B.ts，还有一个再导出文件 index.ts，用于向外部导出这两个模块。各文件内容如下：
A.ts

class A { ... }
export default A

B.ts

class B { ... }
export default B

index.ts

import A from './A.ts'
import B from './B.ts'

在 A 模块里导入 B 模块时，需要使用 import B from './B.ts'，而不能写成 import B from './index.ts'。
因为这样写会导致循环引用：A 模块和 index.ts 在相互引用，形成了循环。

解决方案

相同路径下的其他模块文件仅单独导入，如果是路径外的文件需要导入时，则通过 index.ts 减少不同路径之间的依赖路径数。

问题2（当时未解决，现在已无法复现错误，是正常运行了）

问题描述

通过 webpack-dev-server 插件，启用热更新服务，通过 npm run serve 命令启动虚拟服务端后会报错，错误提示与这个 CASE 类似，但目前已无法复现错误：https://stackoverflow.com/questions/43037590/field-browser-doesnt-contain-a-valid-alias-configuration

问题分析

一开始做练习 DEMO 的时候一直提示错误，后来修改了 package.json 下的 scripts 属性，将 start 设置为 'webpack serve'，然后就能正常运行了。现在回过头去想复现以下错误，但暂时无法复现，先将该问题记录下来，如果之后再次遇到，再来修改。

问题3（当时已解决，但没有及时记录，记不起当时具体的错误原因了）

问题描述

使用webpack插件webpack-dev-server，页面出现Cannot GET/

问题分析

依稀记得属于操作失误，没有输入填写对应的路径，导致访问不到。但记不起具体是哪个地方的路径没填对，可能是配置文件，也可能是网址。先记录下来。