docs(guides): add using-webpack-dev-middleware section #1441
Conversation
| @@ -237,8 +238,105 @@ T> Now that your server is working, you might want to give [Hot Module Replaceme | |||
|
|
|||
| ### Using webpack-dev-middleware | |||
|
|
|||
| ?> Familiar with `webpack-dev-middleware`? We need your help! Please submit a PR to fill in the missing instructions and example here. Make sure to keep it simple as this guide is intended for beginners. | |||
| The `webpack-dev-middleware` provides a way to serve your assets from your express server. The first step is install the webpack and his middleware: | |||
There was a problem hiding this comment.
I would change this to something like:
webpack-dev-middlewareprovides a way to serve your assets from a server and it's highly configurable as well. Let's install it, as well as an Express server and see how we can use it for development:
|
|
||
| ``` bash | ||
| npm install --save-dev webpack webpack-dev-middleware |
There was a problem hiding this comment.
No need to install webpack, that's already done, but we do need express (if we are to follow your example).
| npm install --save-dev webpack webpack-dev-middleware | ||
| ``` | ||
|
|
||
| You need to add a webpack middleware to your express app: |
There was a problem hiding this comment.
I would recommend changing this to something like:
Let's configure
webpack-dev-middlewareto work with our Express server:
|
|
||
| __server.js__ | ||
|
|
||
| ```diff |
There was a problem hiding this comment.
If server.js is a new file (it is in this case), we don't use a diff, but just a js file.
We also need you to add in a change to the project structure:
project
webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- /src
|- index.js
|- print.js
+ |- server.js
|- /node_modules| app.list(3000); | ||
| ``` | ||
|
|
||
| You webpack's config should add some output attributes: |
There was a problem hiding this comment.
S/You webpack's / Your webpack
I would also rephrase:
We need to add some additional properties to the webpack config to tell
webpack-dev-middlewarewhich directories to use for serving files.
| devtool: 'inline-source-map', | ||
| output: { | ||
| filename: '[name].bundle.js', | ||
| + // no real path is required, just pass "/" but it will work with other paths too. |
There was a problem hiding this comment.
This comment is a bit ambiguous, consider being a little more clear, or remove it if it's not that relevant.
| }; | ||
| ``` | ||
|
|
||
| You can activate the hot reload if you add the [`webpack-hot-middleware`](https://github.com/glenjamin/webpack-hot-middleware): |
There was a problem hiding this comment.
I would recommend moving this down, as a secondary step. We don't want the reader to do too many things at the same time.
| const express = require('express'); | ||
| const webpack = require('webpack'); | ||
| const webpackMiddleware = require('webpack-dev-middleware'); | ||
| +const webpackHotMiddleware = require('webpack-hot-middleware'); |
There was a problem hiding this comment.
Please take a look at our other guides (e.g. output management) to see how we format diffs for easier reading :)
There was a problem hiding this comment.
But I use the previous section above as reference.
There was a problem hiding this comment.
Diffs always have 2 extra spaces before each line to provide space to add the - and + symbols.
| publicPath: '/assets/' | ||
| } | ||
| }; | ||
| ``` |
There was a problem hiding this comment.
I'm missing instructions on how to actual run the webpack-dev-middleware.
I'm assuming the reader would need to add a script to their package.json for example?
It's also a good idea to add instructions on which files to open in their browser to see the result(s).
|
|
||
| app.list(3000); | ||
| ``` | ||
| You need to change you webpack's config to active the hot reload: |
There was a problem hiding this comment.
Needs an extra line break here
|
@navarroaxel Do you think you'll be working on this still? I tried installing the stuff myself, but to no avail. |
|
Guys, i was about to create a PR for this as well... shall we wait a bit longer on @navarroaxel , or shall I create a new PR ? |
|
@diegoprd I haven't heard back from him in a while, so if you have something ready for a PR feel free to submit it ;) If I can review it and get it to work locally while following your guide, then I'm a very happy camper! ;) |
|
So I've been messing around with this and I actually seem to have it working. I'll have to do some cleanup and make sure it flows nicely into our guide, but I think I can add this in. |
|
Alright I've created a PR for this which tries to explain in more detail how to achieve this: #1481 Any additions/comments/help is welcome! |
No description provided.