61 lines
2.0 KiB
JavaScript
61 lines
2.0 KiB
JavaScript
const path = require('path');
|
||
const webpack = require('webpack');
|
||
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 自动生成 HTML 文件
|
||
|
||
module.exports = {
|
||
// 入口文件
|
||
entry: './src/app/page.tsx', // 将入口文件指定为 page.tsx
|
||
|
||
// 输出配置
|
||
output: {
|
||
filename: 'bundle.js', // 打包后的文件名
|
||
path: path.resolve(__dirname, 'dist'), // 输出文件的目录
|
||
},
|
||
|
||
// 模块解析
|
||
resolve: {
|
||
extensions: ['.ts', '.tsx', '.js', '.json'], // 支持 .ts, .tsx, .js, .json 文件
|
||
},
|
||
|
||
// 模块加载规则
|
||
module: {
|
||
rules: [
|
||
{
|
||
test: /\.tsx?$/, // 匹配 TypeScript 和 JSX 文件
|
||
use: 'ts-loader', // 使用 ts-loader 转换 TypeScript 为 JavaScript
|
||
exclude: /node_modules/, // 排除 node_modules 目录
|
||
},
|
||
{
|
||
test: /\.css$/, // 匹配 CSS 文件
|
||
use: ['style-loader', 'css-loader'], // 使用 style-loader 和 css-loader 加载 CSS 文件
|
||
},
|
||
{
|
||
test: /\.(jpg|jpeg|png|gif|svg)$/, // 匹配图片文件
|
||
use: ['file-loader'], // 使用 file-loader 处理图片
|
||
},
|
||
],
|
||
},
|
||
|
||
// 插件
|
||
plugins: [
|
||
new webpack.HotModuleReplacementPlugin(), // 启用热更新插件
|
||
new HtmlWebpackPlugin({
|
||
template: './src/index.html', // 自动生成 HTML 文件
|
||
filename: 'index.html', // 生成的文件名
|
||
}),
|
||
],
|
||
|
||
// 开发服务器配置
|
||
devServer: {
|
||
static: path.join(__dirname, 'dist'), // 使用 static 配置替代 contentBase
|
||
hot: true, // 启用热更新
|
||
open: true, // 自动打开浏览器
|
||
port: 8080, // 设置开发服务器端口
|
||
historyApiFallback: true, // 支持单页应用（SPA）
|
||
},
|
||
|
||
// 开发模式设置
|
||
mode: 'development', // 开发模式
|
||
devtool: 'source-map', // 开启源码映射，方便调试
|
||
};
|