[webpack 学习系列] 5. webpack + type
2019-12-26 本文已影响0人
小黄人get徐先生
创建并初始化项目
> mkdir demo && cd demo
> yarn init -y
安装 webpack 相关依赖
> yarn add webpack webpack-cli webpack-dev-server -D
安装 typescript 以及相关 loader：
yarn add typescript ts-loader source-map-loader -D
在项目根目录下添加 webpack.config.js 文件
const path = require('path');
module.exports = {
mode: 'development', // 开发模式
// 入口
entry: {
app: './src/index.ts'
},
devtool: "source-map", // 启用源映射
// 开发服务器相关配置
devServer: {
contentBase: './public' // 开发服务器内容的基本路径
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
}
],
},
// 解析扩展，添加了这个东西。我们就可以直接 import { a } from 'index'; 了，而不用必须 import { a } from 'index.ts' 这样输入了，因为 webpack 会自动帮我们搜索查询并添加
resolve: {
extensions: [ '.tsx', '.ts', '.js' ],
},
// 输出
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
项目根目录下添加 tsconfig.json 文件（具体的参数配置含义，可以参考官网 tsconfig.json：
{
"compilerOptions": {
"outDir": "./dist/",
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true
}
}
如 webpack.config.js 中配置，我们需要在 src 目录下添加一个 index.ts 文件，需要添加一个 public 目录存放文件供服务器访问（静态服务器默认查找并访问 index.html 文件）。
> mkdir src && touch src/index.ts
> mkdir public && touch public/index.html
index.ts 内容如下：
interface User {
name: string,
age: number
}
const user: User = {
name: 'brad',
age: 18
};
console.log(user);
index.html 文件内容如下，根据配置知道打包后的文件名为 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>
现在项目目录如下图：
修改 package.json 里面的脚本配置，添加启动和构建命令：
{
"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"
}
}
现在在命令行下输入 yarn start 实际上执行的就是 webpack-dev-server --open 命令了。
打开浏览器，在 console 下如果能看到打印出来的用户，说明我们的 webpack + typescript 环境就搭建成功了。
接下来我们来支持下 react，首先安装 react 相关依赖：
> yarn add react react-dom
> yarn add @types/react @types/react-dom -D
安装成功后，在 src 目录下添加 index.tsx 文件，内容如下：
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> <!-- 因为 react 要将 hello 组件挂载到这个节点上 -->
<script src="app.bundle.js"></script>
<script src="app1.bundle.js"></script> <!-- 新加的 -->
</body>
</html>
重启执行命令 yarn start启动后发现页面变化成如下：
出现了
Hello from TypeScript and React! 的字样就说明我们支持 react 成功了。
这样子，我们 webpack + typescript + react 的环境就搭建好了。
