Question

的 * UPDATE

我开始了一个全新的项目，更新了我的所有依赖项。我有一个从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"
          ]
        }
      }
    }

我不知所措。我根本就不明白这一点。每个带有jsx语法的文件都会收到✖ 26:7 Parsing error: Unexpected token <错误。它们都是.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语法现在被识别，我认为这是一个奇怪的依赖版本问题。

我不确定问题究竟是什么，并且仍然在同一个回购中为客户端和服务器开发的稳固组合构建系统而努力。我打算继续处理原帖中链接的git repo，当我觉得有足够的东西时，我会回过头来。

尝试与Webpack和Express

1 个答案: