尝试使用 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 文件。

我正在尝试在同一个项目中一起开发一个演示反应应用程序和服务器。我以为我理解了这个过程是如何工作的，但我显然迷路了，因为我似乎无法让所有东西都与 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 用于客户端响应构建，显然我不够聪明，无法尝试在单个构建中完成所有操作。

我在这里有一个 repo 设置：GitRepo，目前正在处理链接的 server-dev 分支。

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

Answer 1

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

我不确定问题到底出在哪里，并且仍在努力在同一个 repo 中为客户端和服务器开发建立可靠的组合构建系统。我计划继续处理原始帖子中链接的 git repo，当我觉得有足够的东西时会回来。