使用 express 和 babel 在 React 应用程序中配置 Webpack

Question

我正在使用 react 版本 ^15.6.1 开发一个 React 应用程序，它使用 Webpack、Express 和 Babel 以及 Yarn 作为包管理器。

我的应用程序运行良好，现在我准备将应用程序投入生产，并使用 webpack 和 css 将 js 编译成 bundle.js，并使用 express 版本 ^4.15.3 配置服务器以创建开发和生产版本。

到目前为止，我已经创建了一个 webpack.config.js 文件，如下所示：

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const webpack = require('webpack');


const config = {
    entry: ['babel-polyfill', './src/index.js'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: 'babel-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html',
            filename: 'index.html',
            inject: 'body'
        })
  ]
};

module.exports = config;

具有以下代码的 server.js 文件：

const express = require('express');
const app = express();

app.use(express.static(__dirname + '/src'));

app.listen(3000, function () {
  console.log('server on port 3000');
});

这是我的 package.json 文件的脚本部分：

"scripts": {
    "start": "node server.js",
    "dev": "node server.js webpack -w",
    "build": "webpack -p --progress --config ./webpack.prod.config.js"
  },

我遇到的问题是，当我在访问网页时使用当前 server.js 文件设置运行yarn start 时，我得到Cannot GET / 但是当我不使用 server.js 文件时我运行yarn start 在我的 package.json 中有以下脚本：

"start": "webpack-dev-server"

项目文件夹结构：

/dist
    bundle.js
    index.html
/node_modules
/src
    /assets
        /styles
            carousel.css
            slider.css
/components
    App.js
    App.js.map
    App.jsx
      index.js
      index.js.map
.babelrc
.eslintrc.js
.gitignore
index.html
package.json
server.js
web pack.config.js
yarn.lock
yarn-error.log

我的网页加载完全正常，但 dist 文件夹不是使用预期的 bundle.js 文件创建的。 bundle.js 文件和包含此文件的 index.html 文件仅在我运行 yarn build 时出现

我想了解为什么会这样？如果我在当前设置中出现任何需要调整的错误，以便我可以使用 webpack 和 babel 运行 express 服务器进行开发和生产。

Answer 1

您的 server.js 文件存在一些问题，它应该看起来更像这样

app.use(express.static(__dirname + 'dist'));

app.get('/', function (req, res) {
   res.sendFile(__dirname + 'dist/index.html', {root: __dirname})
})