【发布时间】：2020-10-13 03:22:45
【问题描述】：
幸运的是，我能够让我的 webpack 构建正常工作。但是，每当我运行“npm start”（webpack-dev-server）时，它都会呈现/提供该文件的父目录。我不太清楚为什么会这样。
-我创建了一个 server.js 文件，当我转到主路由“/”时，它应该为它提供 index.html 文件。 -我确保 webpack.config.js 文件中的条目是正确的，而且似乎是这样。我也在下面包含了我的文件结构作为参考。
client/App.JSX
import React, { Component } from 'react';
import Wrapper from './Containers/MainContainer.jsx';
class App extends Component {
constructor(props) {
super(props);
}
render() {
return(
<div id = "app">
<Wrapper/>
</div>
)
}
}
export default App;
client/Index.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">
<title>Gifty</title>
<link rel="stylesheet" href="client/index.css">
</head>
<body>
<!-- Hang React App Here -->
<div id = "app"></div>
<!-- LOAD SCRIPTS -->
<script type="text/javascript" src="./dist/bundle.js"></script>
</body>
</html>
Server/Server.js
/* eslint no-unused-vars: 0 */
const path = require('path');
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
app.use(express.json());
// app.use(express.static(path.resolve(__dirname, '../client/index.html')));
app.get('/', (req, res) => {
res.status(200).sendFile((path.resolve(__dirname, '../client/index.html'));
});
app.listen(port, () => console.log(`Listening on port ${port}`));
客户端/Index.js
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import App from './App.jsx';
import store from './store.js';
// import styles from './index.css'
// import './index.css';
render(
<Provider store = {store}>
<App/>
</Provider>,
document.getElementById('app')
);
webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
//start at entry
entry: './client/index.js',
// devtool: "eval-source-map",
mode: process.env.NODE_ENV,
//Run these rules on it & go through the loaders
module: {
rules: [
{ test: /\.svg$/, use: 'svg-inline-loader' },
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
{ test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react'],
// plugins: ['@babel/plugin-proposal-object-rest-spread']
}
}
},
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx'],
},
plugins: [
new HtmlWebpackPlugin({
template: 'client/index.html'
})
],
devServer: {
publicPath: "/build/",
proxy: {
'api':'http://localhost:3000',
},
},
resolve: {
extensions: ['.js', '.jsx'],
},
}
package.json 的开始部分
{
"name": "gift-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "cross-env NODE_ENV=production webpack-dev-server --open",
"build": "cross-env NODE_ENV=production webpack",
"dev": "cross-env NODE_ENV=development concurrently \"nodemon server/server.js\" \"webpack-dev-server --open\" "
},
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
一般文件结构
Client
-Actions
-actions.js
-Components
-component1
-component2
-component3
-Constants
-actionTypes.js
-Containers
-Container1
-Container2
-Reducers
-Reducers (Reducer Logic)
-Index.js(Combined Reducers)
-App.jsx
-index.html
-index.css
-index.js (Provider & imported store).
-store.js
-Server
-server.js
-models
-model1
【问题讨论】：
标签： javascript reactjs express webpack react-redux