Question

在开发模式下它工作正常，但是当我制作生产文件时，它确实成功了，但是当我打开服务器时，浏览器会显示：

Uncaught SyntaxError: Unexpected token <

index.js

import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';

import Show from './components/Show'

const router = (
    <Router history={ browserHistory }>
         <Route path="/" component={Show} />
    </Router>
);

render(router, document.getElementById('root'));

Show.js

import React from 'react';

const Show = React.createClass({
    render() {
        return (
            <div>hahaha</div>
        );
    }
});


export default Show;

server.js

var express = require('express')
var path = require('path')
var compression = require('compression')

var app = express()

app.use(compression())

app.use(express.static(path.join(__dirname, 'dist')))

app.get('*', function (req, res) {
    res.sendFile(path.join(__dirname, 'dist', 'index.html'))
})

var PORT = process.env.PORT || 3000
    app.listen(PORT, function() {
    console.log('Production Express server running at localhost:' + PORT)
})

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  <script src="static/bundle.js"></script>
</body>
</html>

webpack.config.prod.js

var webpack = require('webpack');
var path = require('path');

module.exports = {
  devtool: 'source-map',
  entry: [
    './client/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  module: {
    loaders:[
          { 
            test: /\.css$/, 
            include: path.join(__dirname, 'client'),
            loader: 'style-loader!css-loader' 
          },
          {
            test: /\.js$/,
            loaders: ['babel'],
            include: path.join(__dirname, 'client')
          },
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': "'production'"
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    })
  ]
};

enter image description here

未捕获的SyntaxError：意外的令牌＆lt;，但它在开发模式

0 个答案: