使用Express和Babel在React应用程序中配置Webpack [英] Webpack configuration in React application with express and babel

问题描述

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

我的应用程序运行良好，现在我准备将应用程序投入生产，并使用Webpack和CSS将js编译为bundle.js，并使用^ 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文件而运行时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服务器进行开发和生产.

解决方案

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

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

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

I am developing a React application using react version ^15.6.1 which uses Webpack, Express and Babel and Yarn as a package manager.

My application is running fine and now I am ready to take application to production and compile js into bundle.js using webpack as well as css and configure a server using express version ^4.15.3 to create development and production build.

So far I have created a webpack.config.js file which looks like this:

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;

a server.js file which has the following code:

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

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

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

and this is the scripts section of my package.json file:

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

The problem I am experiencing is that when I run yarn start with the current server.js file set-up when visiting the webpage I am getting Cannot GET / but when I am not using the server.js file and I run yarn start with the following script in my package.json:

"start": "webpack-dev-server"

Project folder structure:

/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

my webpage loads completely fine but the dist folder is not created with the bundle.js file intended. The bundle.js file and index.html file with this file placed into it only appear when I run yarn build

I want to understand why this is happening? If I have made any errors in my current set-up which need adjusting so that I can run the express server for development and production using webpack and babel.

解决方案

There some problems with your server.js file it should look more like this

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

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

这篇关于使用Express和Babel在React应用程序中配置Webpack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！