【发布时间】：2018-08-11 12:55:30
【问题描述】：
我正在尝试创建我的 ReactJS 项目，但我正在为一些基础知识而苦苦挣扎。我有一个 /dist/ 文件夹，其中有我的 index.html 文件，以及 bundle.js 的位置以及运行应用程序所需的任何其他内容（在我的情况下，是一个图像）。
这是我当前的文件夹结构： （完整代码；https://github.com/CraigInBrisbane/ReactLearning）
下面是我的 webpack.config.js 文件。
我找不到 index.html 文件是如何加载的，以及为什么我拥有它。它位于 /dist/ 文件夹中。当我在本地运行应用程序时，react 如何知道从这里加载索引文件？ (npm 运行开发)
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/index.jsx',
output: {
path: path.join(__dirname, '/dist/'),
filename: 'bundle.js',
publicPath: ''
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['env', 'react'],
"plugins": ["transform-es2015-destructuring", "transform-object-rest-spread"]
}
},
{
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
},
{
test: /\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
},
{
test: /\.svg$/,
loader: 'babel-loader!svg-react-loader'
}
]
},
devServer : {
contentBase: './dist'
}
};
这是我的 packages.json。当我运行 webpack 时，似乎更新了 bundle.js 和图像，但 html 保持不变。这可能没问题。这是保存此文件的正确位置吗？我以为 /dist 文件夹会在我运行 webpack 时重建。如果我从那里删除 index.html 文件 - 应用程序将不再加载。
另外，如果我将 dist 文件夹复制到 Web 服务器（所以，部署它），我会在加载时看到一个空白屏幕。我认为我的文件夹结构有误。
{
"name": "leantreact",
"version": "1.0.0",
"description": "A small project to try and learn ReactJS",
"main": "./src/index.jsx",
"scripts": {
"dev": "webpack-dev-server --progress --colors",
"build": "webpack -p --progress",
"test": "echo \"Error: no test specified\" && exit 1"
},
"license": "ISC",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.7",
"file-loader": "^1.1.5",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-toastify": "^3.3.4",
"style-loader": "^0.19.0",
"svg-react-loader": "^0.4.5",
"url-loader": "^0.6.2",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
}
}
如果我的文件夹结构对项目有效，我将如何将我的应用程序“发布”到我的网络服务器？我希望只复制 /dist 内容，但 html 文件的加载方式似乎与我的 webpack-devserver 上的加载方式不同。
奇怪的是，当我将文件复制到我的网络服务器时，加载的只是页脚！控制台没有显示错误。
就好像我的“路由器”永远不会被加载。我的 App.jsx 是这样的：
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Home from './pages/home.jsx';
import About from './pages/about.jsx';
import Contact from './pages/contact.jsx';
import Footer from './components/footer.jsx';
import SignIn from './pages/signin.jsx';
import Register from './pages/register.jsx';
export default class App extends React.Component {
render() {
return (
<div>
<Router>
<div>
<Route exact path='/' component={Home} />
<Route path='/about' component={About} />
<Route path='/contact' component={Contact} />
<Route path="/signin" component={SignIn} />
<Route path="/register" component={Register} />
</div>
</Router>
<Footer />
</div>
)
}
}
我认为我运行 webpack 开发服务器的方式可能是问题的一部分。因为发生的其他事情是，当我转到一条路线（例如 mysite/signin）时，它可以工作.. 组件中的 sing 已加载。但是，如果我进行代码更改，webpack 会重新构建，我会收到错误：Cannot GET /signin
然后我必须从浏览器中的 url 中删除“登录”，它会加载主屏幕。请注意，当我转到我的登录页面（路线？）时，网址会更改为“http://localhost:8080/signin”
HTML 文件只是：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<title>Learning Stuff</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>
【问题讨论】：
标签： javascript reactjs webpack