Typescript + react + webpack-server 搭建前端框架

之前有一个webpack 搭建的前端框架，但是由于业务上的问题，处理的我写了好多dom的操作，有点繁琐。加上人不足的情况下，更加麻烦了。
我在考虑新架构的时候在想使用vue还是react，但是最后我还是选择了react，至于之前爆发的一个关于react的开源协议问题，只要在中国使用那么问题就不大。

至于我为什么选择了react，而不使用vue。
其实也就是宋代升级，还有团队的协作性。在规范性上面React做得是比较强大的，还有就是社区问题，React的社区几乎是全球性，而vue给我的感觉是国内的火，不过要符合国内的需求的的话还是vue比较好，最怕的就是宋代升级的问题，比如vue1 和 vue2 的东西就不一样了。还有就是ng4的话也是一个比较不错的框架，但是适合做大项目罗，功能强大，你可以完全当一个后端程序来对待。

首先直接参考这个typescript官网中的react&webpack建立文件
https://www.tslang.cn/docs/handbook/react-&-webpack.html PS:请使用yarn 或者 cnpm 来操作

区别在于我们的index.html页面是这样的

下面我们就要添加webpack-dev-server 和 html-webpack-plugin
注意的是你必须要使用2.9.7的版本2.1.0有点bug问题

yarn add [email protected] html-webpack-plugin --dev

然后配置一下
webpack.config.js

在命令行输入 webpack-dev-server --open即可
前提是你要安装webpack-dev-server 是全局的

package.json添加scripts脚本操作

{
  "name": "Dome3",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "webpack-dev-server --open",
    "build": "webpack build"
  },
  "dependencies": {
    "@types/react": "^16.0.34",
    "@types/react-dom": "^16.0.3",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "webpack": "^3.10.0"
  },
  "devDependencies": {
    "awesome-typescript-loader": "^3.4.1",
    "html-webpack-plugin": "^2.30.1",
    "source-map-loader": "^0.2.3",
    "typescript": "^2.6.2",
    "webpack-dev-server": "2.9.7"
  }
}

还有一点注意的是 以后使用jquery 什么之类，记得加一个 @types/jquery 这个依赖包

如果

图片.png