Typescript + React + Webpack 4
1: 创建项目目录
mkdir react-ts-webpack
cd react-ts-webpack
2：初始化项目
npm init -y
npm init命令会在当前目录下创建package.json文件，-y 会让package.json文件包含默认的配置。所以这一步结束的时候，你的项目是这样的：
Screen Shot 2019-11-21 at 7.39.15 PM.png
PS：当然项目里面的.gitignore是我自己加的。
3：安装webpack，webapck-cli, webpack-dev-server
npm install --save-dev webpack webpack-cli webpack-dev-server
webpack：用来打包出我们最后需要发布的文件
webapck-cli： 是webpack的命令行工具
webpack-dev-server： 供我们在开发的时候起一个server来跑我们的应用
以上的三个包安装完之后，在我们package.json文件里面，会出现如下变化：
Screen Shot 2019-11-21 at 7.46.04 PM.png
4: 安装typescript，awesome-typescript-loader
npm install --save-dev typescript awesome-typescript-loader
awesome-typescript-loader： 是一个typescript的loader，还有其他的loader，你可以选择
5：添加React
npm install react react-dom @types/react @types/react-dom
我们需要安装react和react-dom两个包，因为我们要使用Typescript，所以我们同时需要安装对应的Typescript包。
以上命令执行完之后，我们会在package.json的dependencies下看到react相关的包：
Screen Shot 2019-11-21 at 7.58.38 PM.png
OK，目前为止，我们已经把，Webpack，Typescript, React相关的依赖都安装完了。现在我们就来做相应的配置。
6：添加tsconfig.json文件并配置
在项目根目录下添加一个tsconfig.json文件，作为Typescript编译的配置文件。并且添加以下内容：
{
"compilerOptions": {
"outDir": "./dis/",
"sourceMap": true,
"noImplicitAny": true,
"module": "commonjs",
"target": "es6",
"jsx": "react"
}
}
你还可以有很多配置项可以使用，具体可以参考Typescrip的官方文档。
7: 创建demo文件
我们在项目根目录下创建/src文件夹，在/src文件夹下面创建2个文件（index.html和index.tsx）和一个子文件夹（/components）, 且在/components目录下创建一个App.tsx文件，最后的目录结构如下所示：
Screen Shot 2019-11-21 at 8.26.01 PM.png
接下来就是编写我们刚刚创建的三个文件：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello React</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
App.tsx
import * as React from 'react';
import {useState} from "react";
function App(){
const [count, setCount] = useState(0);
return (
<div>
<div>You have clicked {count} times.</div>
<button onClick={()=>setCount(count + 1)}> click </button>
</div>
);
}
export default App;
index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render (
<App />,
document.getElementById("root")
);
好的，到现在为止我们的代码也都写完了，下面就是利用webpack让它跑起来并且可以打包了。
8: 安装source-map-loader
npm install --save-dev source-map-loader
在我们去编写我们的webpack配置之前，我们先安装一个包：source-map-loader。因为我们最后打包的文件都是经过一系列编译和打包的，source-map-loader可以给我们的代码源文件和最终打包之后的文件创建一个map，以方便调试。
9 安装html-webpack-plugin
npm install --save-dev html-webpack-plugin
html-webpack-plugin包可以帮我们自动生产html文件，且把打包出来的bundle文件自动引入到这个html文件中。
10：添加webpack.config.js文件并配置
在项目根目录下创建一个webpack.config.js文件，并且添加以下内容：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: "source-map",
resolve: {
extensions: ['.ts', '.tsx', '.js']
},
entry: {
main: './src/index.tsx'
},
output: {
path: path.join(__dirname, '/dist'),
filename: "bundle.min.js"
},
module: {
rules: [
{
test: /\.ts(x?)$/,
exclude: /node_moduls/,
use: [
{
loader: "awesome-typescript-loader"
}
]
},
{
enforce: "pre",
test: /\.js$/,
loader: 'source-map-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html"
})
]
}
9：配置本地跑和打包的脚本
在上一步我们已经写好了我们的webpack.config.js一些最基本的配置。现在我们需要添加脚本使得我们在命令行工具里面能在本地跑我们的网站和打包。我们需要编辑package.json文件，修改scripts配置内容：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
}
10：本地起项目
npm run dev
通过我们在上一步配置的脚本，我们可以通过npm run dev在本地起一个sever在跑我们的网站，端口默认为8080，现在我们就可以在浏览器里面看到如下画面了：
Screen Shot 2019-11-21 at 9.21.47 PM.png
11：打包项目
npm run build
以上命令会按照我们所配置的，在根目录下生成一个dist/文件夹，dist/文件夹里面是我们的bundle文件和html文件。dist/目录下的文件也就是我们可以拿去做线上部署的文件。结构如下图所示：
Screen Shot 2019-11-21 at 9.16.54 PM.png
以上就是一个最基本的React + Typescript + Webpack的demo。但是对于正常的一个项目来说，依然还有更多需要做的。我们在下一篇文章里面再讲。
