monorepo-microservice-rbac/apps/aorta/scripts/webpack.dev.ts
2023-12-21 12:49:50 +08:00

70 lines
2.6 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import path from "path";
import { merge } from "webpack-merge";
import webpack, { Configuration as WebpackConfiguration } from "webpack";
import WebpackDevServer from "webpack-dev-server";
import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";
import baseConfig from "./webpack.common";
import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin";
const FriendlyErrorsWebpackPlugin = require("friendly-errors-webpack-plugin");
import { proxyMap } from "./dev.proxy";
/**
* 运行命令的时候重启一次打开一个tab 页很烦,所以呢优化一下
* 参考create-react-app 的启动方式
* https://github.com/facebook/create-react-app/blob/main/packages/react-dev-utils/openChrome.applescript
* 记得关闭webpack-dev-server的配置中的自动打开 open: false 或者注释
*/
// import openBrowser from "./util/openBrowser";
interface Configuration extends WebpackConfiguration {
devServer?: WebpackDevServerConfiguration;
}
const host = "0.0.0.0";
const port = 9000;
// 合并公共配置,并添加开发环境配置
const devConfig: Configuration = merge(baseConfig, {
mode: "development", // 开发模式,打包更加快速,省了代码优化步骤
/**
* 开发环境推荐eval-cheap-module-source-map
* 本地开发首次打包慢点没关系,因为 eval 缓存的原因, 热更新会很快
* 开发中,我们每行代码不会写的太长,只需要定位到行就行,所以加上 cheap
* 我们希望能够找到源代码的错误,而不是打包后的,所以需要加上 module
*/
devtool: "eval-cheap-module-source-map",
stats: "errors-only",
plugins: [
new ReactRefreshWebpackPlugin({ overlay: false }), // 添加热更新插件
new FriendlyErrorsWebpackPlugin(),
],
});
const devServer = new WebpackDevServer(
{
host, // 地址
port, // 端口
open: false, // 是否自动打开,关闭
setupExitSignals: true, // 允许在 SIGINT 和 SIGTERM 信号时关闭开发服务器和退出进程。
compress: false, // gzip压缩,开发环境不开启,提升热更新速度
hot: true, // 开启热更新后面会讲react模块热替换具体配置
historyApiFallback: true, // 解决history路由404问题
static: {
directory: path.join(__dirname, "../public"), // 托管静态资源public文件夹
},
headers: { "Access-Control-Allow-Origin": "*" },
proxy: proxyMap,
client: {
progress: true,
},
},
webpack(devConfig)
);
devServer.start().then(() => {
// 启动界面
// openBrowser(`http://${host}:${port}`);
});
export default devConfig;