Я создал одностраничное приложение React, используя React, webpack & react-router.Приложение работает нормально локально, без каких-либо ошибок или предупреждений.
Проблема заключается в том, что когда я создаю производственную сборку и пытаюсь запустить файл index.html в папке dist, он не загружает мое приложение реакции.
package.json
{
"name": "redux-simple-starter",
"version": "1.0.0",
"description": "Simple starter package for Redux with React and Babel support",
"main": "index.js",
"repository": "",
"scripts": {
"start": "webpack --mode development",
"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.3.4",
"@babel/plugin-proposal-class-properties": "^7.4.0",
"@babel/preset-env": "^7.3.4",
"@babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"babel-polyfill": "^6.26.0",
"css-loader": "^2.1.1",
"eslint": "^5.15.1",
"eslint-loader": "^2.1.2",
"eslint-plugin-react": "^7.12.4",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.11.0",
"sass-loader": "^7.1.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1"
},
"dependencies": {
"html-webpack-plugin": "^3.2.0",
"prop-types": "^15.7.2",
"react": "^16.8.4",
"react-bootstrap": "^1.0.0-beta.5",
"react-dom": "^16.8.4",
"react-redux": "^6.0.1",
"react-router-dom": "^4.3.1",
"react-youtube": "^7.9.0",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"styled-components": "^4.1.3"
}
}
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: ['babel-polyfill', path.join(__dirname, "./src/index.js")],
output: {
path: path.join(__dirname, "dist"),
filename: "index_bundle.js",
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader", "eslint-loader"],
},
{
test: /.(css|scss)$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
}
]
},
devServer: {
//historyApiFallback: true,
},
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: path.join(__dirname, "./src/index.html")
}),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
}
npm run build создаетПапка dist с index_bundle, main.css, index.html, но при открытии index.html производственная сборка не работает.Я что-то пропустил?Мы будем благодарны за любую помощь.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="main.css" rel="stylesheet"></head>
<body>
<div id="main-wrapper"></div>
<script type="text/javascript" src="index_bundle.js"></script></body>
</html>
index_bundle.js Размер довольно велик, следовательно, общий URL-адрес pastebin
https://pastebin.com/i7VcfFgLd