javascript - localhost Node 服务器无法从webpack加载bundle.js

Question

我正在学习如何响应 Isomorphic App tutorial .

由于我对 React 很陌生，所以我严格遵循教程，按照描述编写每个脚本。当我使用 npm start 启动服务器时，localhost:3000 上的浏览​​器不会按预期呈现页面，仅显示标题，而没有输入字段和按钮添加新的待办事项。打开开发控制台，发现 bundle.js 无法加载，我真的不明白为什么。

如果我将浏览器指向 localhost:3000/home，另一方面，它会呈现输入字段和按钮，但 bundle.js 不会已加载，并且“应用程序”不起作用(即不添加新的待办事项)。

我是 React、Webpack 和 Node 的新手，我用 google 搜索了很多，但我真的无法通过，我不知道发生了什么。 package.json 和 webpack.config 也已按照教程指示创建。

这几天我一直在用头撞墙，请减轻我的痛苦，我求你了:D

这是我的配置:

package.json:

{
  "name": "isomorphic-redux",
  "version": "1.0.0",
  "repository": "https://github.com/bananaoomarang/isomorphic-redux",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "NODE_PATH=$NODE_PATH:./shared node --harmony .",
    "dev": "npm run start & webpack-dev-server --progress --color",
    "build": "NODE_ENV=production webpack --progress --color -p --config webpack.prod.config.js"
  },
  "author": "Milo Mordaunt <milomord@gmail.com>",
  "license": "MIT",
  "dependencies": {
    "axios": "^0.7.0",
    "express": "^4.13.3",
    "history": "^1.9.1",
    "immutable": "^3.7.5",
    "object-assign": "^4.0.1",
    "react": "^0.14.0",
    "react-dom": "^0.14.0",
    "react-redux": "^4.0.0",
    "react-router": "1.0.0-rc3",
    "redux": "^3.0.0",
    "webpack": "^1.13.2"
  },
  "devDependencies": {
    "babel": "latest",
    "babel-eslint": "^4.1.2",
    "babel-loader": "^5.3.2",
    "eslint": "^1.4.3",
    "eslint-plugin-react": "^3.3.2",
    "react-hot-loader": "^1.3.0",
    "webpack": "^1.12.1",
    "webpack-dev-server": "^1.11.0"
  }
}

webpack.config

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

module.exports = {
  entry:  [
    'webpack-dev-server/client?http://127.0.0.1:8080/',
    'webpack/hot/only-dev-server',
    './client'
  ],
  output: {
    path:     path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    modulesDirectories: ['node_modules', 'shared'],
    extensions:         ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test:    /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel']
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ],
  devtool: 'inline-source-map',
  devServer: {
    hot: true,
    proxy: {
      '*': 'http://127.0.0.1:' + (process.env.PORT || 3000)
    },
    host: '127.0.0.1'
  }
};

项目结构如下:

client/
---index.jsx
shared/
---actions/
---components/
------...
------Home.jsx
------index.jsx
---reducers/
---routes.jsx

index.js
server.jsx
package.json
webpack.config
.babelrc

Answer 1

您正在运行两个不同的设置，它们不能立即相互了解。当你这样做时npm start你用 index.js 启动 Node 进程文件最终提供一些引用不存在的bundle.js 文件的html。

另一方面，当您运行webpack-dev-server时，所有捆绑的内容将仅驻留在内存中，并且永远不会写入磁盘。因此该文件将不可用于以 npm start 启动的服务器.

但是正如您在 webpack 配置中看到的，它包含一个 proxy 的部分。配置为将所有未知路径路由到端口 3000 上的后端。这是两个设置连接的地方。您需要使用 npm run dev 运行 webpack-dev-server然后打开localhost:8080在您的浏览器中。此任务自动运行npm start作为第一个命令(运行您的 Node 应用程序)，然后启动 webpack-dev-server 。所以如果你想访问你的应用程序，你一定不能使用端口 3000但要么转到 8080这是 webpack-dev-server 的端口.

您收到的错误也记录在博客文章的以下位置:https://medium.com/front-end-developers/handcrafting-an-isomorphic-redux-application-with-love-40ada4468af4#4c7c

If you see a errors in the console about bundle.js not being found, Don’t Panic. This is because the client is trying to load bundle.js, but we haven’t configured Webpack’s entry point yet, so we get nothing.

稍后可以在几行中找到解决方案( https://medium.com/front-end-developers/handcrafting-an-isomorphic-redux-application-with-love-40ada4468af4#0eed ):

Now we can start our app with npm run dev (instead of npm start) and Webpack will serve our client a bundle.js, so it can do it’s own routing from here-on-out. It still won’t look very interesting, but visiting http://localhost:8080/ should work without errors.