尝试使用 Webpack 和 Express 同时开发服务器和客户端应用程序

Question

更新*

我开始了一个全新的项目，更新了我所有的依赖项。我从 HTMLWebpackPlugin 发生了注入，但是我无能为力让 webpack 识别 JSX 语法？！？！？！？！？！

这是webpack.config

import webpack from 'webpack';
import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';

export default {
  devtool: 'inline-source-map',
  entry: [
    'eventsource-polyfill', // necessary for hot reloading with IE
    'webpack-hot-middleware/client?reload=true', //note that it reloads the page if hot module reloading fails.
    path.resolve(__dirname, 'src/client/index')
  ],
  target: 'web',
  output: {
    path: path.resolve(__dirname, 'src'),
    publicPath: '/',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    // Create HTML file that includes reference to bundled JS.
    new HtmlWebpackPlugin({
      template: 'src/client/index.html',
      inject: true
    })
  ],
  module: {
    loaders: [
      {test: /\.js$/, exclude:  /(node_modules|bower_components)/, loader: 'babel-loader' },
      {test: /\.css$/, loaders: ['style-loader','css-loader']},
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader'},
      {test: /\.(woff|woff2)$/, loader: 'url-loader?prefix=font/&limit=5000'},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream'},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml'}
    ]
  }
}

这是我的 babelrc：

{
      "presets": [
        "react",
        "latest"
      ],
      "env": {
        "development": {
          "presets": [
            "react-hmre"
          ]
        }
      }
    }

我很茫然。我根本不明白这一点。我收到一个：✖ 26:7 Parsing error: Unexpected token < 每个带有 jsx 语法的文件的错误。它们都是.js文件。

我正在尝试在同一个项目中同时开发一个演示 React 应用程序和服务器。我以为我理解这个过程是如何工作的，但我显然迷路了，因为我似乎无法让所有东西与 webpack 和 express 一起工作。

我的 webpack 配置为：

import webpack from 'webpack';
import path from 'path';
import HtmlWebpackPlugin from 'html-webpack-plugin';

export default {
  debug: true,
  devtool: 'inline-source-map',
  noInfo: false,
  entry: [
    'eventsource-polyfill', // necessary for hot reloading with IE
    'webpack-hot-middleware/client?reload=true', //note that it reloads the page if hot module reloading fails.
    path.resolve(__dirname, 'src/client/index')
  ],
  target: 'web',
    output: {
        path: path.resolve(__dirname, 'src/client'),
        publicPath: '/',
        filename: 'bundle.js'
    },
  devServer: {
    contentBase: path.resolve(__dirname, 'src/client')
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'src/client/index.html',
        inject: true
    })
  ],
  module: {
    loaders: [
      {test: /\.js$/, include: path.join(__dirname, 'src/client'),exclude: '/node_modules/', loaders: ['babel']},
      {test: /(\.css)$/, loaders: ['style', 'css']},
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
      {test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000'},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
      {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}
    ]
  }
};

但是 htmlwebpack 插件没有注入任何东西，当我手动添加一个脚本标签到 '/bundle' 时，我又得到了 html 文件。我认为这也与尝试开发服务器应用程序有关：

import express from 'express';
import open from 'open';

import configure from './configuration/server.configuration'; //eslint-disable-line import/default
import * as routes from '../common/api.routes';
import feedHandler from './routes/api.feeds.handler';
import socketHandler from './routes/socket.handler';

const app = express();

app.set('port', (process.env.PORT || 3000));

configure(app);
app.use(routes.BASE_API, feedHandler);

app.get('/', (req, resp)=>{
    resp.sendFile(app.get('index'));
});

const server = app.listen(app.get('port'), (err)=>{
    if(err){
        console.log(err); //eslint-disable-line no-console
    }else{
        open(`http://localhost:${app.get('port')}`);
    }
});

const io = socketHandler(server);

我设置的用于区分开发版本和服务器版本并且当前正在导入的配置应用程序：

import webpack from 'webpack';
import path from 'path';
import config from '../../../webpack.config.dev';

export default function(app){
    const compiler = webpack(config);

    app.use(require('webpack-dev-middleware')(compiler, {
        noInfo: true,
        publicPath: config.output.publicPath
    }));

    app.use(require('webpack-hot-middleware')(compiler));
    app.set('index', path.join(__dirname, '../../client/index.html'));
    return app;
}

我完全迷失在这里，因为快速节点开发超出了我的舒适范围，因为通常我只是将 MVC 用于服务器的东西。我之前只将 webpack 用于客户端反应构建，显然我不够聪明，无法尝试在一个构建中完成所有事情。

我在这里有一个回购设置：GitRepo并且目前正在链接的 server-dev 分支上工作。

我想弄清楚我做错了什么以及为什么我无法正常工作。甚至我的 api 路由也只是挂起而没有 return 任何东西。我想也许是因为 webpack 开发服务器正在拦截？我不太确定，甚至不知道在文档中哪里可以找到它。

Answer 1

我要将其标记为已关闭。我最终将整个项目重置为出色的 React-Slingshot 入门工具包，然后从那里继续。 JSX 语法现在正在被识别，我认为这是一个奇怪的依赖版本问题。

我不确定问题到底是什么，并且仍在努力为同一存储库中的客户端和服务器开发建立可靠的组合构建系统。我计划继续处理原始 post 中链接的 git 回购协议，当我觉得有足够的东西时，我会回过头来。

尝试使用 Webpack 和 Express 同时开发服务器和客户端应用程序

Attempting to develop server and client app concurrently with Webpack and Express

jsx

express

reactjs

webpack