Question

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

我的应用程序运行正常，现在我准备将应用程序生产并使用webpack和css将js编译成bundle.js并使用express版本^ 4.15.3配置服务器以创建开发和生产构建。< / p>

到目前为止，我已经创建了一个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时我在package.json中使用以下脚本运行yarn start：

"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

我的网页加载完全正常但是没有使用bundle.js文件创建dist文件夹。只有在我运行yarn build

时，才会显示包含此文件的bundle.js文件和index.html文件

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

Answer 1

你的server.js文件有些问题，看起来应该更像这个

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

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

React应用程序中的Webpack配置与express和babel

1 个答案: