TypeScript+React+Webpack+CssModu

初始化项目

这里我们使用react官方的脚手架create-react-app来生成一个ts版的项目

create-react-app my-app --scripts-version=react-scripts-ts

这里就不细说其他的内容了

自定义webpack的配置

因为这里我们使用create-react-app来创建的项目，如果我们想要自定义webpack的配置的话需要执行
npm run jest来抽离出由react-script控制的webpack配置文件。
目录结构如下图，其中config里面就是webpack的配置文件了

image

那么怎么开启css modules呢？超简单---->

1. 打开config里面的webpack.config.dev.js
2. image
3. 完成了

现在让我们在代码里面写点css module 的语法来试试

image

4. 运行npm run start来看看效果

不出意外的话你会看到这个画面

image

这是个神马情况？在google之后终于找到了答案，原来ts-loader是默认只将ts文件和js文件作为模块来看的，所以在这儿我们引入了css文件是不会被ts-loader认识的所以出错也在理所当然了，那怎么解决这个问题呢。
伟大的stackoverflow告诉了我们答案，Duang！Duang！
只要在项目文件里加入一个declaration.d.ts文件

image
问题就迎刃而解了。

最后这篇文章没有干货！没有干货！！！！！