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

Empty wepback output file with express and react

本文关键字：wepback 输出 文件 清空 react express 使用      更新时间：2023-09-26

我正在尝试将基本的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期望节点/express的东西与我期望前端文件捆绑在一起的方式交互时遇到了一些问题。帮助

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

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

相关文章：