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', // 开启源码映射，方便调试
|
|||
|
|
};
|