使用 express 和 react 清空 webpack 输出文件答案

【问题标题】：Empty wepback output file with express and react使用 express 和 react 清空 webpack 输出文件
【发布时间】：2016-03-26 21:00:21
【问题描述】：

我正在尝试将基本的反应评论列表教程转换为使用 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 期望节点/表达的东西与我期望前端文件捆绑在一起的方式交互的方式上搞砸了。救命！

【问题讨论】：

这是一个开发服务器 - 它不写入 FS，而是从内存中提供服务。 PS：不清楚为什么您的公共路径几乎没有多余的尾随空格"/ "
是的，尾随空格绝对是一个错字。谢谢你抓住那个。在让我的反应内容呈现方面，我是否只需要在 index.html 中添加对我的输出文件的脚本引用，然后开始在入口点文件中编码？

标签： javascript express reactjs webpack

【解决方案1】：

无论是通过webpack/webpack-dev-server 还是在您的Express 应用程序中直接使用webpack/webpack-dev-middleware 时，Webpack 编译器的文件系统都将be replaced 使用内存中的文件系统。

如果您使用webpack-dev-middleware，则文件将从内存文件系统中独占解析。使用webpack-dev-server，或者当您手动添加静态中间件时，编译期间创建的资产将写入内存文件系统，并优先于磁盘上输出目录中存在的任何内容。这就是为什么您可能会看到output/foo.png 是从磁盘读取的，但空的output/bundle.js 显示的是新鲜、正确的块内容。

【讨论】：