官方提供脚手架工具create-react-app初始化项目时是用react-script(内部也是用webpack)进行打包构建的，现在我们直接用webpack工具对于项目进行配置。
Step 1: Using create-react-app
npx create-react-app my-app --template typescript
Step 2: Adding Webpack
添加webpack脚手架和webpack类型声明
npm install webpack webpack-cli --save-dev
npm install @type/webpack
在package.json添加
"build": "webpack"
在根目录下添加webpackconfig.ts
Step3: Adding Typeconfig
在根目录下添加tsconfig.ts,详细的配置可以前往(官方)[www.typescriptlang.org/tsconfig#is…]
{
"compilerOptions": {
"noEmit": false,
"jsx": "react"
}
}
Add an import, export, or an empty 'export {}' statement to make it a module.
"compilerOptions": {
isolatedModules: false
}
Step4: Adding Babel
babel-loader 是用来解析语法的 @babel/preset-env是用来根据指定的执行环境提供语法装换.l
npm i @babel/core @babel/preset-env babel-loader --save-dev
在根目录下添加.babelrc,添加如下配置
{
"presets": [
"@babel/preset-env"
]
}
Step5: WebackConfig
输入输出
entry: 用于定义项目入口文件，Webpack 会从这些入口文件找出所有项目文件；
output: 用于定义输出的文件路径和文件名
module.exports = {
mode: 'development',
entry: "./src/index.tsx",
output: {
filename: "main.js",
path: path.resolve(__dirname, "build"),
},
}
模块处理
Resolve：配置模块路径解析规则
module： 用于配置模块加载规则
externals：排除那些事不需要webpack进行打包的，简称外部资源
Loader: 对于不同文件格式进行加载
Plugin: 扩展webpack的功能
html-webpack-plugin： 提供一个html页面，需指定文件夹。
npm install html-webpack-plugin --save-dev
module.exports = {
mode: 'development',
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "public", "index.html"),
}),
],
module: {
rules: [
{
test: /.tsx?$/,
use: 'ts-loader',
include: [path.resolve(__dirname, '/src')], //指定文件
exclude: /node_modules/,//排除
}
]
}
}
Step6: Adding Webpack dev server
webpack-dev-server用于提供http服务。
npm install --save-dev webpack-dev-server
{
...
devServer: {
static: {
directory: path.join(__dirname, "build"),
},
port: 3000,
},
}
