快速服务器提供的 Webpack 包 - 找不到包

Question

Hi this is my express server which i'm trying to setup to use with webpack.嗨，这是我的快速服务器，我正在尝试设置它以与 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 ./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;
  }
}

./server.js ./server.js

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;

./webpack.config.js ./webpack.config.js

<!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 ./build/index.html

When I run node app.js it finds the index.html page but i'm get a 404 error 'cannot find bundle.js' im sure somewhere im pointing to the wrong directory but i cannot seem to work it out!当我运行node app.js它会找到index.html页面，但我收到 404 错误“找不到 bundle.js”，我确定我指向了错误的目录，但我似乎无法解决！

Answer 1

When you're serving build/index.html on / it looks for the file /bundle.js (the directory you start your server from), which clearly doesn't exist.当你的服务build/index.html上/它查找文件/bundle.js （目录你开始从你的服务器），这显然不存在。 With your Webpack config you would create the file /build/bundle.js , if you ran Webpack.有了您的WebPack的配置，你会创建文件/build/bundle.js ，如果您运行的WebPack。

Now here is where the webpack-dev-middleware comes in. Instead of creating that file, it serves the bundle from memory whenever the according path is hit.现在这是webpack-dev-middleware用武之地。它不是创建该文件，而是在命中相应路径时从内存中提供包。 All you need to do, is tell the middleware that you want to serve the bundle on / by setting the publicPath in ./app.js .所有你需要做的，就是告诉中间件要担任捆/通过设置publicPath在./app.js。

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

You also don't need to serve anything on /build .您也不需要在/build上提供任何服务。 But if you want to use it to test the built bundle from your actual file system, you would need to run Webpack to generate that bundle.但是，如果您想使用它来测试来自实际文件系统的构建包，则需要运行 Webpack 来生成该包。 For that to work correctly you need to correct your BUILD_DIR to:为了使其正常工作，您需要将BUILD_DIR为：

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

The reason is that path.resolve treats /build as an absolute path and doesn't add it to the current directory.原因是path.resolve将/build视为绝对路径，并没有将其添加到当前目录中。 Which would also throw a permission denied error unless you run it as root.除非您以 root 身份运行，否则这也会引发权限被拒绝错误。 For more information see: https://nodejs.org/docs/latest/api/path.html#path_path_resolve_paths有关更多信息，请参阅： https : //nodejs.org/docs/latest/api/path.html#path_path_resolve_paths

快速服务器提供的 Webpack 包 - 找不到包

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-02-13 23:04:33

快速服务器提供的 Webpack 包 - 找不到包

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-02-13 23:04:33

解决方案1
1 已采纳 2017-02-13 23:04:33