哦豁,这几天手撸了个 webpack5+react+typescript 项目,遇到了几个坑,就突发奇想总结一下(持续更新)
更新时间(2021-07-30)
坑集
- 热更新失效
- 路由重定向
- 使用 import
- 文件路径别名
热更新失效
首先我使用的webpack版本是5+,所以热更新是需要在 devServer
这个对象里配置 hot: true
就好了,哎,就是这么简单的一步,就有坑,如下
-
同时开启
hot: true
和inline: true
, 热更新会不触发,能检测到哪个文件修改,页面就是不动(devServer对象里的属性, 开发环境配置) -
使用了 vendor 之后,热更新失效了!!!这TND就离谱(entry 对象,入口文件配置)
vendor 的作用: 依赖的第三方库, vendor里定义的打包到vendor.js里,自己的打包到对应的chunks里
-
package.json
里面的browserslist
竟!然!也!可!以!让!更新失效(百度来的) 开发环境的 webpack devServer 配置如下
devServer: { // 开发环境热更新
historyApiFallback: true, // 路由匹配,没有找到路由就显示入口文件
contentBase: path.join(__dirname, './dist'),
open: true,
noInfo: true,
hot: true,
quiet: true, // 避免不必要的信息打印在控制台
port: 8082, // 端口号
// inline: true, // 实时刷新
// liveReload: false, // 重新加载/刷新页面
// publicPath: '/', // 公共路径 打包后资源可以访问的路径
},
路由重定向
关于这个,身为前端大佬的你肯定不陌生,哎,就是这么个熟悉的玩意儿,竟然出问题了,webpack的热更新会刷新页面,刷新完之后它竟然执行了路由重定向!!!我尼玛,我每次更新都会回到 /welcome
,找了半天,发现把重定向关了就是在原页面刷新了, giao!
代码就不贴了,太low了.
** 使用import **
这个是个报错哈,报的是model is not find
,哎呀这是发生了甚么事情,我用 import XX from './XX'
,报错了,是不是很纳闷,其实就是没有写全,改成 import XX from './XX.tsx'
就好了,这样很麻烦对不对,那就使用webpack里面的路径配置吧extensions: [ '.tsx', '.ts', '.js', '.jsx' ]
具体代码
resolve:{
...,
extensions: [ '.tsx', '.ts', '.js', '.jsx' ]
}
路径别名
这个就很有意思,快速引入模块,很简单,就不说明了
代码如下
resolve:{
alias: {
'@': path.resolve('src')
},
extensions: [ '.tsx', '.ts', '.js', '.jsx' ]
}