У меня был клиент, который пожаловался мне, что производственная сборка моего приложения React (ни один клиент не использует настраиваемую конфигурацию веб-пакета) хорошо отображается во всех браузерах, кроме IE.Он работает в Chrome, Firefox и Edge, но в IE он отображает пустую страницу.Я открыл свой браузер IE и посмотрел, нет ли в нем ошибок, нет ли ошибок в консоли.
Я думаю, что проблема связана с настройкой конфигурации моего веб-пакета.Вот оно:
- Я уже установил Isomorphic fetch и пакеты зависимостей обещания es6 и использовал их для всех моих запросов на выборку.(Я использую async await для своих обещаний)
- Я попытался добавить цели в свою пользовательскую конфигурацию веб-пакета, но безуспешно.
const path = require("path");
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");
module.exports = {
devServer: {
contentBase: path.join(__dirname, "/public"),
historyApiFallback: true,
port: 3000,
proxy: {
"/api": "http://localhost:5000"
}
},
entry: ["babel-polyfill", __dirname + "/src/index.js"],
output: {
path: path.join(__dirname, "/public"),
filename: "bundle.js",
publicPath: "/"
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
query: {
presets: [
[
"env",
{
targets: {
browsers: ["last 2 versions", "ie >= 11"]
}
}
],
"react",
"stage-0"
]
}
}
},
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
},
{
test: /\.(png|jpg)$/,
use: {
loader: "file-loader"
}
}
]
},
plugins: [
// Disable code splitting as it's creating many duplicate bundle profiles
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
}),
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
new BrowserSyncPlugin({
host: "localhost",
port: 3312,
files: [
"./public/*.html",
"./public/assets/scss/*.scss",
"./public/assets/variables/*.scss",
"./public/assets/mixins/*.scss",
"./public/assets/reset/*.scss"
],
proxy: "http://localhost:3000/"
})
]
};
Это мой файл index.jsрендеринг приложения
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import routes from "./routes";
ReactDOM.render(<div>{routes}</div>, document.getElementById("root"));
Я ожидаю, что смогу увидеть свое приложение React в локальной сборке и в производственной сборке для IE вместо того, чтобы ничего не видеть для IE.