67 lines
2.5 KiB
TypeScript
67 lines
2.5 KiB
TypeScript
|
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 或者注释
|
|||
|
|
*/
|
|||
|
|
const openBrowser = require("./util/openBrowser");
|
|||
|
|
|
|||
|
|
interface Configuration extends WebpackConfiguration {
|
|||
|
|
devServer?: WebpackDevServerConfiguration;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const host = "127.0.0.1";
|
|||
|
|
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(), // 添加热更新插件
|
|||
|
|
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,
|
|||
|
|
},
|
|||
|
|
webpack(devConfig)
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
devServer.start().then(() => {
|
|||
|
|
// 启动界面
|
|||
|
|
openBrowser(`http://${host}:${port}`);
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
export default devConfig;
|