Empty wepback output file with express and react
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!
Answer
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.
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM