創(chuàng)建并初始化項(xiàng)目
> mkdir demo && cd demo
> yarn init -y
安裝 webpack 相關(guān)依賴
> yarn add webpack webpack-cli webpack-dev-server -D
安裝 typescript 以及相關(guān) loader：
yarn add typescript ts-loader source-map-loader -D
在項(xiàng)目根目錄下添加 webpack.config.js 文件
const path = require('path');
module.exports = {
mode: 'development', // 開發(fā)模式
// 入口
entry: {
app: './src/index.ts'
},
devtool: "source-map", // 啟用源映射
// 開發(fā)服務(wù)器相關(guān)配置
devServer: {
contentBase: './public' // 開發(fā)服務(wù)器內(nèi)容的基本路徑
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
}
],
},
// 解析擴(kuò)展，添加了這個(gè)東西算色。我們就可以直接 import { a } from 'index'; 了挣菲，而不用必須 import { a } from 'index.ts' 這樣輸入了套硼，因?yàn)?webpack 會(huì)自動(dòng)幫我們搜索查詢并添加
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
// 輸出
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
項(xiàng)目根目錄下添加 tsconfig.json 文件（具體的參數(shù)配置含義倡缠，可以參考官網(wǎng) tsconfig.json：
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true
}
}
如 webpack.config.js 中配置萌抵，我們需要在 src 目錄下添加一個(gè) index.ts 文件棍丐，需要添加一個(gè) public 目錄存放文件供服務(wù)器訪問(wèn)（靜態(tài)服務(wù)器默認(rèn)查找并訪問(wèn) index.html 文件）渠牲。
> mkdir src && touch src/index.ts
> mkdir public && touch public/index.html
index.ts 內(nèi)容如下：
interface User {
name: string,
age: number
}
const user: User = {
name: 'brad',
age: 18
};
console.log(user);
index.html 文件內(nèi)容如下，根據(jù)配置知道打包后的文件名為 app.bundle.js：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>ts</h1>
<script src="app.bundle.js"></script>
</body>
</html>
現(xiàn)在項(xiàng)目目錄如下圖：
修改 package.json 里面的腳本配置泌参，添加啟動(dòng)和構(gòu)建命令：
{
"name": "demo",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --open",
"build": "webpack"
},
"devDependencies": {
"@types/react": "^16.9.17",
"@types/react-dom": "^16.9.4",
"source-map-loader": "^0.2.4",
"ts-loader": "^6.2.1",
"typescript": "^3.7.4",
"webpack": "^4.41.4",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
},
"dependencies": {
"react": "^16.12.0",
"react-dom": "^16.12.0"
}
}
現(xiàn)在在命令行下輸入 yarn start 實(shí)際上執(zhí)行的就是 webpack-dev-server --open 命令了脆淹。
打開瀏覽器，在 console 下如果能看到打印出來(lái)的用戶及舍，說(shuō)明我們的 webpack + typescript 環(huán)境就搭建成功了未辆。
接下來(lái)我們來(lái)支持下 react，首先安裝 react 相關(guān)依賴：
> yarn add react react-dom
> yarn add @types/react @types/react-dom -D
安裝成功后锯玛，在 src 目錄下添加 index.tsx 文件，內(nèi)容如下：
src/index.tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
export interface HelloProps { compiler: string; framework: string; }
export const Hello = (props: HelloProps) => <h1>Hello from {props.compiler} and {props.framework}!</h1>;
ReactDOM.render(
<Hello compiler="TypeScript" framework="React" />,
document.getElementById("example")
);
修改 webpack.config.js 文件的入口配置：
entry: {
app: './src/index.ts',
app1: './src/index.tsx' // 新加的
},
修改 src/index.html 的腳本引用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>ts</h1>
<div id="example"></div> <!-- 因?yàn)?react 要將 hello 組件掛載到這個(gè)節(jié)點(diǎn)上 -->
<script src="app.bundle.js"></script>
<script src="app1.bundle.js"></script> <!-- 新加的 -->
</body>
</html>
重啟執(zhí)行命令 yarn start啟動(dòng)后發(fā)現(xiàn)頁(yè)面變化成如下：
出現(xiàn)了
Hello from TypeScript and React! 的字樣就說(shuō)明我們支持 react 成功了兼蜈。
這樣子攘残，我們 webpack + typescript + react 的環(huán)境就搭建好了。
