Я создал реагирующее веб-приложение. Он хорошо работал на настольных компьютерах, но на мобильных устройствах он действительно замедлялся. Поэтому после прочтения о том, как улучшить производительность, я нашел веб-пакет, который поможет мне связать код и сократить время загрузки. Я решил попробовать и начал внедрять его в свое уже работающее приложение. После того, как код скомпилирован, я теперь могу видеть содержимое в браузере локально, но взаимодействие с моим сервером узлов (запущенным в порту 3001) облажается. Каждый вызов Ax ios в мою базу данных / GraphQl / сервер возвращает ответ 404 (все вызовы со стороны клиента: http://localhost: 8080 / auth / login ). Я не думаю, что мой «прокси»: «http://localhost: 3001 / » в пакете клиента. json больше не имеет ничего общего с моим приложением реакции. Итак, как я могу настроить webpack, чтобы мой Api вызывал go на сервер вместо webpack-dev-server в порту 8080? Все звонки, сделанные с почтальоном, работают нормально, но не отреагировали. Заранее спасибо
пакет. json
{
"name": "pet-grooming-platform",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:3001/",
"dependencies": {
"@babel/runtime": "^7.8.4",
"@fortawesome/fontawesome-free": "^5.12.1",
"@stripe/react-stripe-js": "^1.0.3",
"@stripe/stripe-js": "^1.0.2",
"apollo-boost": "^0.4.7",
"apollo-client": "^2.6.8",
"axios": "^0.19.2",
"graphql": "^14.6.0",
"graphql-tag": "^2.10.3",
"jsonwebtoken": "^8.5.1",
"lodash": "^4.17.15",
"moment": "^2.24.0",
"react": "^16.12.0",
"react-apollo": "^3.1.3",
"react-big-calendar": "^0.23.0",
"react-datepicker": "^2.12.0",
"react-dom": "^16.6.3",
"react-reveal": "^1.2.2",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.4.0",
"react-select": "^3.0.8",
"react-stripe-checkout": "^2.6.3",
"react-table-6": "^6.11.0",
"react-table-v6": "^6.8.6",
"react-toastify": "^5.5.0",
"reactstrap": "^8.4.1"
},
"scripts": {
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"@babel/core": "^7.8.7",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/polyfill": "^7.8.7",
"@babel/preset-env": "^7.8.7",
"@babel/preset-react": "^7.8.3",
"babel-loader": "^8.0.6",
"css-loader": "^3.4.2",
"eslint-plugin-flowtype": "^4.6.0",
"fibers": "^4.0.2",
"file-loader": "^5.1.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"i": "^0.3.6",
"node-sass": "^4.13.1",
"npm": "^6.14.2",
"sass": "^1.26.3",
"sass-loader": "^8.0.2",
"typescript": "^3.8.3",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
}
}
webpack.config. js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
path: __dirname + "/build",
filename: "index_bundle.js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: "babel-loader"
},
{
test: /\.s?css$/,
use: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /\.(ttf|eot|svg|gif|png)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: [
{
loader: "file-loader"
}
]
},
{
test: /\.(svg|woff|woff2|ttf|eot|otf)([\?]?.*)$/,
loader: "file-loader?name=assets/fonts/[name].[ext]"
}
// { test: /\.html$/i, loader: "html-loader" }
]
},
plugins: [
new HtmlWebpackPlugin({
template: "public/index.html"
})
]
};
Один из моих звонков из компонента реакции:
const handleSubmit = async e => {
e.preventDefault();
if (email === "" || password === "") {
setloadingAxiosReq(false);
setShowError(false);
setShowNullError(true);
setLoggedIn(false);
setErrorMessage("Enter your credentials!");
} else {
try {
setloadingAxiosReq(true);
const response = await axios.post("/auth/login", {
email,
password
});
setModal(false);
setloadingAxiosReq(false);
localStorage.setItem("JWT", response.data.token);
window.location.href = "/auth/profile";
setShowError(false);
setShowNullError(false);
setLoggedIn(true);
setAuthorized(true);
} catch (error) {
setErrorMessage(error.response.data.message);
setloadingAxiosReq(false);
}
}
};