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

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 运行s 时，找到我的 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 和 public http 请求都正常工作。我认为我在 webpack 期望节点/快递东西与我期望前端文件捆绑在一起的方式进行交互的方式上搞砸了。求助！

Answer 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 显示的是新的、正确的块内容。

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

Empty wepback output file with express and react

javascript

express

reactjs

webpack