Webpack 配置一个用 TypeScript 写的 React 项目
时间: 2024-09-13 09:08:49 浏览: 14
Webpack是一个流行的模块打包工具,用于将JavaScript、CSS和其他静态资源打包成浏览器可执行的文件。在使用TypeScript编写的React项目中配置Webpack,我们需要确保支持TypeScript编译、按需加载和代码分割。
以下是一个基本的Webpack配置示例,假设你已经安装了`webpack`, `react`, `typescript`, `@babel/core`, `@babel/preset-env`, `@babel/preset-react`, 和`@typescript/babel-preset`等依赖:
1. 首先,在项目的根目录创建一个`webpack.config.js`文件:
```javascript
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const TsConfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
// 输出路径
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
// 模块解析器
resolve: {
extensions: ['.ts', '.tsx', '.js'],
plugins: [new TsConfigPathsPlugin({ configFile: './tsconfig.json' })], // 使用TypeScript配置文件
},
// 加载器配置
module: {
rules: [
{
test: /\.tsx?$/,
use: ['ts-loader', 'babel-loader'], // 先通过ts-loader处理TS文件,再通过Babel转换语法
exclude: /node_modules/, // 排除第三方库
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
},
},
},
],
},
// HTML 插件,用于生成HTML入口文件
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html', // 或者你自定义的模板文件
favicon: path.join(__dirname, 'public/favicon.ico'), // 如果有favicon
}),
new CleanWebpackPlugin(), // 清理输出目录
new TerserPlugin({ // 压缩JS
terserOptions: {
mangle: true,
compress: {
warnings: false,
},
},
}),
],
// 其他配置如devServer、mode(生产环境或开发环境)等根据实际需求添加
};
```