webpack5+react+typescript遇见的坑,总结篇(持续更新)

610 阅读2分钟

哦豁,这几天手撸了个 webpack5+react+typescript 项目,遇到了几个坑,就突发奇想总结一下(持续更新)

更新时间(2021-07-30)

坑集

  • 热更新失效
  • 路由重定向
  • 使用 import
  • 文件路径别名

热更新失效

首先我使用的webpack版本是5+,所以热更新是需要在 devServer 这个对象里配置 hot: true 就好了,哎,就是这么简单的一步,就有坑,如下

  1. 同时开启 hot: trueinline: true , 热更新会不触发,能检测到哪个文件修改,页面就是不动(devServer对象里的属性, 开发环境配置)

  2. 使用了 vendor 之后,热更新失效了!!!这TND就离谱(entry 对象,入口文件配置)

     vendor 的作用: 依赖的第三方库, vendor里定义的打包到vendor.js里,自己的打包到对应的chunks里
    
  3. 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' ]
  }