Question

我正在尝试创建一个ReactJS项目，但我正在努力解决一些基础问题。我有一个/ dist /文件夹，其中我有我的index.html文件，以及bundle.js的位置以及运行应用程序所需的任何其他内容（在我的例子中，是一个图像）。

这是我当前的文件夹结构：（完整代码; https://github.com/CraigInBrisbane/ReactLearning）

下面是我的webpack.config.js文件。

我找不到index.html文件的加载方式，以及为什么我要加载它。它位于/ dist /文件夹中。当我在本地运行应用程序时，如何知道从这里加载索引文件？（npm run dev）

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保持不变。这可能没问题。这是保存此文件的正确位置吗？当我运行webpack时，我认为/ dist文件夹将被重建。如果我从那里删除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 dev服务器的方式可能是问题的一部分。因为发生的其他事情是，当我去路线（例如mysite / signin）时，它可以工作..组件中的单元被加载。但是，如果我进行代码更改，webpack会重建，我会收到错误：Cannot GET /signin

然后我必须从浏览器的网址中删除“signin”，主屏幕加载。请注意，当我转到我的登录页面（路线？）时，网址会更改为“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>

Answer 1

当我在本地运行应用程序时，如何知道从这里加载索引文件？（npm run dev）

React dev服务器知道在哪里查找index.html，因为你的webpack配置中有以下几行：

devServer : {
  contentBase: './dist'
}

使用npm start dev运行webpack-dev-server，它会在/ dist文件夹中查找index.html作为您的反应应用程序的基础。

这是保存此文件的正确位置吗？

对此有不同的意见。通常人们认为dist文件夹应该是纯粹生成的，因此您可以完全删除它，运行构建脚本并从头开始获取应用程序的可部署版本。这不适用于您的方法，因为index.html可能已经手动放置，如果您删除/ dist文件夹并再次运行构建脚本，则不会存在。

另一方面，对于可能是正常方法的小型项目。无论如何，如果你想生成index.html，你应该看一下webpack的html-webpack-plugin。

我希望只复制/ dist内容，但html文件的加载方式似乎与我在webpack-devserver上的加载方式不同。

你可以提供更多信息吗？打开已部署的应用程序时，控制台中是否有任何错误？

ReactJS文件结构

1 个答案: