Empty wepback output file with express and react

- 1 answer

Ad

I'm trying to convert the basic react comment list tutorial to use webpack and things seem to be working, but my output file doesn't ever get populated with anything.

Here's my webpack config:

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']
        }
      }
    ]
  }
}

Here's some relevant parts of the server supplied by the tutorial that I modified to try and add 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));

When I run the server file it looks like webpack runs, finds my entry.js file and starts building everything the way I would expect:

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.

But my output file bundle.js remains empty. I'm not seeing any errors on the server, the api and public http request are all working appropriately. I think that I've got something messed up in the way that webpack is expecting the node / express stuff to be interacting with the way I'm expecting the front end files to be bundled up together. Help!

Ad

Answer

Ad

Whether through webpack/webpack-dev-server or when you use webpack/webpack-dev-middleware directly in your Express application, the Webpack compiler's file system will be replaced with an in-memory file system.

If you use webpack-dev-middleware, files are resolved from the in-memory file system exclusively. With webpack-dev-server, or when you add the static middleware yourself manually, assets created during compilation are written to the in-memory file system and take precedence over whatever exists in the output directory on disk. This is why you may see that output/foo.png is read from disk, but the empty output/bundle.js is showing fresh, correct chunk content.

Ad
source: stackoverflow.com
Ad