Javascript express server提供的网页包包-can'；我找不到包裹_Javascript_Node.js_Express_Webpack_Webpack Dev Server

Javascript express server提供的网页包包-can'；我找不到包裹

javascript node.js express webpack

Javascript express server提供的网页包包-can'；我找不到包裹,javascript,node.js,express,webpack,webpack-dev-server,Javascript,Node.js,Express,Webpack,Webpack Dev Server,您好，这是我的express服务器，我正在尝试将其设置为与webpack一起使用 const Server = require('./server.js') const path = require('path') const port = (process.env.PORT || 3001) const app = Server.app() if (process.env.NODE_ENV !== 'production') { const webpack = require('webp

您好，这是我的express服务器，我正在尝试将其设置为与webpack一起使用

const Server = require('./server.js')
const path = require('path')
const port = (process.env.PORT || 3001)
const app = Server.app()

if (process.env.NODE_ENV !== 'production') {
  const webpack = require('webpack')
  const webpackDevMiddleware = require('webpack-dev-middleware')
  const webpackHotMiddleware = require('webpack-hot-middleware')
  const config = require('./webpack.config.js')
  const compiler = webpack(config)

  app.use(webpackHotMiddleware(compiler))
  app.use(webpackDevMiddleware(compiler, {
    noInfo: true,
    publicPath: path.join(__dirname, '/build')
  }))
}

app.listen(port)
  console.log(`Listening at http://localhost:${port}`)

/app.js

const path = require('path')
const express = require('express')

module.exports = {
  app: function () {
    const app = express();
    const indexPath = path.join(__dirname, '/build/index.html');
    const publicPath = express.static(path.join(__dirname, '/build'));

    app.use('/build', publicPath);
    app.get('/', function (_, res) { res.sendFile(indexPath) });

    return app;
  }
}

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

var BUILD_DIR = path.resolve(__dirname, '/build');

var config = {
  entry: path.resolve(__dirname,'app/main.js'),
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js',
    publicPath: '/build/'
  },
  module: {
    loaders: [
      { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015', 'react']}},
      { test: /\.sass$/, loaders: ['style', 'css', 'sass'] },
      { test: /\.css$/, loader: "style!css" },
      { test: /\.png$/, loader: "url-loader?prefix=img/&limit=5000" },
      { test: /\.svg$/, loader: 'babel!svg-react' }
    ]
  }
};

module.exports = config;

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
  </head>
  <body>
    <div id="app">
      <script type="text/javascript" src="bundle.js"></script>
    </div>
  </body>
</html>

/server.js

const path = require('path')
const express = require('express')

module.exports = {
  app: function () {
    const app = express();
    const indexPath = path.join(__dirname, '/build/index.html');
    const publicPath = express.static(path.join(__dirname, '/build'));

    app.use('/build', publicPath);
    app.get('/', function (_, res) { res.sendFile(indexPath) });

    return app;
  }
}

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

var BUILD_DIR = path.resolve(__dirname, '/build');

var config = {
  entry: path.resolve(__dirname,'app/main.js'),
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js',
    publicPath: '/build/'
  },
  module: {
    loaders: [
      { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015', 'react']}},
      { test: /\.sass$/, loaders: ['style', 'css', 'sass'] },
      { test: /\.css$/, loader: "style!css" },
      { test: /\.png$/, loader: "url-loader?prefix=img/&limit=5000" },
      { test: /\.svg$/, loader: 'babel!svg-react' }
    ]
  }
};

module.exports = config;

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
  </head>
  <body>
    <div id="app">
      <script type="text/javascript" src="bundle.js"></script>
    </div>
  </body>
</html>

/webpack.config.js

const path = require('path')
const express = require('express')

module.exports = {
  app: function () {
    const app = express();
    const indexPath = path.join(__dirname, '/build/index.html');
    const publicPath = express.static(path.join(__dirname, '/build'));

    app.use('/build', publicPath);
    app.get('/', function (_, res) { res.sendFile(indexPath) });

    return app;
  }
}

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

var BUILD_DIR = path.resolve(__dirname, '/build');

var config = {
  entry: path.resolve(__dirname,'app/main.js'),
  output: {
    path: BUILD_DIR,
    filename: 'bundle.js',
    publicPath: '/build/'
  },
  module: {
    loaders: [
      { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['es2015', 'react']}},
      { test: /\.sass$/, loaders: ['style', 'css', 'sass'] },
      { test: /\.css$/, loader: "style!css" },
      { test: /\.png$/, loader: "url-loader?prefix=img/&limit=5000" },
      { test: /\.svg$/, loader: 'babel!svg-react' }
    ]
  }
};

module.exports = config;

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
  </head>
  <body>
    <div id="app">
      <script type="text/javascript" src="bundle.js"></script>
    </div>
  </body>
</html>


测试

/build/index.html

当我运行

node app.js

时，它会找到

index.html

页面，但我遇到了一个404错误“找不到bundle.js”我确定我在某个地方指向了错误的目录，但我似乎无法找到它

当您在

上提供

build/index.html

时，它会查找文件

/bundle.js

（启动服务器的目录），该文件显然不存在。如果运行Webpack，您可以使用Webpack配置创建文件

/build/bundle.js

现在这里是

webpack开发中间件

的用武之地。它不是创建该文件，而是在命中相应的路径时从内存中为包提供服务。您只需通过在/app.js中设置

publicPath

，告诉中间件您希望在

上提供捆绑包

app.use(webpackDevMiddleware(compiler, {
  noInfo: true,
  publicPath: '/'
}))

您也不需要在

/build

上提供任何服务。但是，如果您想使用它来测试从实际文件系统构建的捆绑包，则需要运行Webpack来生成该捆绑包。要使其正常工作，您需要将

BUILD\u DIR

更正为：

var BUILD_DIR = path.resolve(__dirname, './build');

原因是

path.resolve

将

/build

视为绝对路径，不会将其添加到当前目录。这也会抛出权限拒绝错误，除非您以root用户身份运行它。有关更多信息，请参阅：

您的

bundle.js存放在哪里？。它是在您的BUILD_DIR
（或）其他地方吗？bundle.js应该通过网页包输出到BUILD_DIR（./BUILD），在这种情况下，在您的var config
声明中，您的文件名
应该更改为文件名：'./bundle.js'，
对吗？既然我给了它一个路径，它应该没问题，但我还是尝试了，但没有。好吧，最后一个问题，你的build.html
和你的bundle.js
文件是否在同一个目录中？你知道嵌套路由吗？我有几乎完全相同的设置，但当我尝试点击如下内容时：“/test”节点无法找到index.html或“无法获取/test”。我在前面使用React/browserHistoryend@user2465134您需要为这些路由提供/index.html
，例如，在没有其他路由匹配时提供服务。但是您必须确保不会意外地提供它，而不是JavaScript或任何资产。这就是所谓的历史API回退（History API fallback），有一些插件/中间件可以帮你处理这个问题。它显示了我的设置，可以为您提供更多的上下文Michael，我使用历史API回退，我有通配符路由，应该发送index.html。由于index.html是通过Webpackdev服务器存储在内存中的，所以历史API回退应该为它提供服务，但它似乎没有