Question

我是新来的表达反应＆amp;的WebPack。我已经设置了webpack但是当我路由到我的主页时chrome控制台显示home.bundle.js未找到请帮助.. 这是我的package.json

{
  "name": "react28072017",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Usman Khan",
  "license": "ISC",
  "dependencies": {
    "express": "^4.15.3",
    "jshint": "^2.9.5",
    "jshint-loader": "^0.8.4",
    "path": "^0.12.7",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "redux": "^3.7.2"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "extract-text-webpack-plugin": "^3.0.0",
    "webpack": "^2.1.0-beta.22"
  }
}

Webpack.config.js

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
    entry: {
        home: './src/Components/home.js',
        about: './src/Components/about.js'
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name].bundle.js'

    },
    module : {
        preloaders: [
            {
                test: /\.js$/,
                exclude: /node_modules$/,
                loader: 'jshint-loader'
            }
        ],
        loaders: [
 /*           {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    loader: 'css?sourceMap'
                })
            },*/
            {
                test: /.jsx$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test:/\.js/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },
    /*plugins: [
        new ExtractTextPlugin('dist/style.css')
    ],*/
    devtool: 'source-map',
    watch: true
}

server.js

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

var app = express();

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

app.get('/home', function(req, res) {
    res.sendFile(path.join(__dirname + '/src/htmlFiles/home.html'));
});

app.get('/about', function(req, res)  {
    res.sendFile(path.join(__dirname + '/src/htmlFiles/about.html'));
});

app.listen('8080', function()  {
    console.log('Running on Port 8080');
})

的index.html

    <!DOCTYPE html>
<html lang="en">
<head>

    <title>Home2</title>
    <script src="../../dist/home.bundle.js" type="text/javascript"></script>

</head>
<body>
<div id="home"></div>


<!-- Include all compiled plugins (below), or include individual files as needed -->


</body>
</html>

home.js（反应组件）

import React from 'react';
import ReactDOM from 'react-dom';


class Home extends React.Component {
    render() {
        return <h1>Home</h1>
    }
}

ReactDOM.render(<Home />, document.getElementById('home'));

这是我的目录结构 Directory Structure

当我得到铬并致电localhost：8080 / home 并查看我的chrome控制台，它提供错误脚本404找不到 Error Image

请帮帮我.. 在此先感谢

bundle.js没找到快递

0 个答案: