Question

我在Isomorphic App tutorial之后学习反应。

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

如果我将浏览器指向localhost:3000/home，另一方面，它会呈现输入字段和按钮，但不会再次加载bundle.js，并且＆＃34; app＆＃34;没有工作（即没有添加新的待办事项）。

我有新的反应，网络包和节点，我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文件启动节点进程，该文件最终会提供一些引用不存在的bundle.js文件的html。

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

但正如您在webpack配置中看到的那样，它包含一个部分，其中proxy配置为将所有未知路径路由到端口3000上的后端。这是两个设置连接的位置。您需要使用npm run dev运行webpack-dev-server，然后在浏览器中打开localhost:8080。此任务自动运行npm start作为第一个命令（运行您的节点应用程序），然后启动webpack-dev-server。因此，如果您想访问您的应用程序，则不得使用端口3000，而是转到8080的端口webpack-dev-server。

您获得的错误也会记录在此职位的博客文章中：https://medium.com/front-end-developers/handcrafting-an-isomorphic-redux-application-with-love-40ada4468af4#4c7c

如果您在控制台中发现有关未找到bundle.js的错误，请勿恐慌。这是因为客户端正在尝试加载bundle.js，但是我们还没有配置Webpack的入口点，所以我们什么都没得到。

稍后可以找到解决方案（https://medium.com/front-end-developers/handcrafting-an-isomorphic-redux-application-with-love-40ada4468af4#0eed）：

现在我们可以使用npm run dev（而不是npm start）启动我们的应用程序，Webpack将为我们的客户端提供一个bundle.js，因此它可以从这里开始自己的路由。它看起来仍然不是很有趣，但访问http://localhost:8080/应该没有错误。

Answer 2

根据您的package.json，您正在使用新的babel 6版本。但是，您没有此新版本的所有必需依赖项。根据babel-loader，您还需要安装babel-preset-es2015：

npm install babel-loader babel-core babel-preset-es2015 --save-dev

当您还使用React时，还需要安装react预设。因此，请同时安装：

npm install --save-dev babel-preset-es2015 babel-preset-react

在您的软件包文件夹中创建一个名为.babelrc的文件，以保持babel配置并启用两个预设：

.babelrc
{
  "presets": ["es2015", "react"]
}

然后再次运行服务器：

npm run dev

然后http://localhost:8090/assets/bundle.js应该显示捆绑的模块。

我的诊断：

您无法获得bundle.js，因为您的npm run dev由于未正确配置babel加载程序而引发一些错误。然后，当您尝试请求bundle.js文件时，会收到404错误，因为它尚未生成。

从-> https://stackoverflow.com/questions/33502987/webpack-bundle-js-not-found

localhost节点服务器无法从webpack

2 个答案: