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

Posted 2023-02-22

【中文标题】使用 express 和 babel 在 React 应用程序中配置 Webpack

【英文标题】：Webpack configuration in React application with express and babel

【发布时间】：2018-01-05 04:08:01

【问题描述】：

我正在使用 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 服务器进行开发和生产。

【问题讨论】：

你可以阅读文档。 Production build 和 Production server

【参考方案1】：

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

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

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

【讨论】：

我使用了这段代码，所以我的 server.js 现在看起来像这样：

const express = require('express'); const app = express(); app.use(express.static(__dirname + '/dist')); app.get('/', function (req, res) res.sendFile('path/to/index.html'); ) app.listen(3000, function () console.log('server on port 3000'); );

这样我得到以下错误：TypeError: path must be absolute or specify root to res.sendFile

在控制台中检查我收到以下错误消息：GET http://localhost:3000/ 500 (Internal Server Error)

把path/to/index.html改成index.html文件的实际绝对路径