使用Express和React时出现空的wepback输出文件

Question

我将尝试将基本的React评论列表教程转换为使用Webpack，似乎一切正常，但我的输出文件从未填充任何内容。

这是我的Webpack配置：

module.exports = {
    context: __dirname + "/app",
    entry: "./entry.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js",
        publicPath: "/  "
    },
    module: {
    loaders: [
      { test: /\.css$/, loader: 'style!css' },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules|bower_components/,
        query: {
          presets: ['react']
        }
      }
    ]
  }
}

以下是我根据教程提供的服务器代码进行修改以尝试添加webpack的相关部分：

const webpackMiddleware = require('webpack-dev-middleware');
const config = require('./webpack.config');
const app = express();
const compiler = webpack(config);
app.use('/', express.static(path.join(__dirname, 'public')));
app.use(webpackMiddleware(compiler));

当我运行服务器文件时，它看起来像是webpack在运行，找到了我的entry.js文件并开始按照我预期的方式构建所有内容。

Server started: http://localhost:3000/
Hash: 8541f0bf4ae3ae4162c1
Version: webpack 1.12.9
Time: 949ms
    Asset    Size  Chunks             Chunk Names
bundle.js  680 kB       0  [emitted]  main
chunk    {0} bundle.js (main) 646 kB [rendered]
    [0] ./app/entry.js 249 bytes {0} [built]
    [1] ./~/react/react.js 56 bytes {0} [built]
    [2] ./~/react/lib/React.js 1.49 kB {0} [built]
    [3] ./~/react/lib/ReactDOM.js 3.71 kB {0} [built]
...
  [161] ./app/comment-form.js 1.28 kB {0} [built]
  webpack: bundle is now VALID.

但是我的输出文件bundle.js仍然为空。我没有在服务器上看到任何错误，api和公共http请求都正常工作。我认为我在webpack期望node/express与我期望前端文件一起捆绑的方式交互方面出了问题。帮帮我！

- paniclater

---

这是一个开发服务器 - 它不会写入文件系统，而是从内存中提供服务。另外，PS：你的公共路径末尾有几个额外的空格“/ ”，原因并不明显。 - zerkms

是的，末尾的空格肯定是个笔误。感谢你注意到了。至于让我的React东西渲染，我只需要在index.html中添加一个脚本引用来引用我的输出文件，然后开始在入口点文件中编码吗？ - paniclater

Answer 1

无论是通过webpack/webpack-dev-server还是直接在Express应用程序中使用webpack/webpack-dev-middleware，Webpack编译器的文件系统都将被替换为内存文件系统。如果您使用webpack-dev-middleware，则文件将完全从内存文件系统解析。对于webpack-dev-server，或者当您手动添加静态中间件时，编译期间创建的资源将写入内存文件系统，并优先于磁盘上输出目录中存在的任何内容。这就是为什么您可能会看到output/foo.png从磁盘读取，但空的output/bundle.js显示新鲜、正确的块内容的原因。

- Filip Dupanović