Add content for "how to develop" #231
Conversation
|
|
||
| - Explain that some editors use "atomic save"; this needs to be disabled in order to see all file changes. | ||
| In most cases **you'll want to use webpack-dev-server**. |
| - show how to use in CLI | ||
| - show how to use API | ||
| - explain that you need to use your own server (maybe show the python server) | ||
| ### Adjusting Your Text Editor |
There was a problem hiding this comment.
Just ##, check the headers.
|
|
||
| ### Source Maps | ||
|
|
||
| When a Javascript exception occurs, you'll often want to know what file and line is generating this error. Since webpack outputs files into one or more bundles, it can be inconvenient to trace the file. |
There was a problem hiding this comment.
/s/Javascript/JavaScript - check overall.
|
|
||
| ### Source Maps |
There was a problem hiding this comment.
This is in a weird place and breaks the flow a bit. Maybe you could mention about the topic at a tip (T>). Not sure.
There was a problem hiding this comment.
Hmm, I kinda agree with you here, but the meaning of this document was to explain what you need to get started with developing. I find it a bit weird to put this into a tip since it's such an essential part.
I could try a more step based approach. That would be:
## 1. Adjusting Your Text Editor
## 2. Source Maps
## 3. Choosing a Tool
### webpack Watch Mode
### webpack-dev-server
### webpack-dev-middlewareThis would also allow us to add more steps. What do you think?
There was a problem hiding this comment.
Sounds better. Or push the sourcemap bit to an article of its own and link there.
There was a problem hiding this comment.
Yeah I already link to the sourcemap article for more information, but I want to explain it in short here :).
|
|
||
| webpack's watch mode watches files for changes. If any change is detected, it'll run the compilation again. | ||
|
|
||
| We want webpack to display nice colors and a progress bar while it's compiling. Let's run the command: |
There was a problem hiding this comment.
If I remember right, --colors shouldn't be needed anymore. webpack should be able to detect color support automatically. The flag might not exist. Check this.
| python -m SimpleHTTPServer | ||
| ``` | ||
|
|
||
| After each compilation, you will need to manually refresh your browser to see the changes. |
There was a problem hiding this comment.
Maybe mention about a Node based alternative too. I use serve myself though there are lots of options.
|
|
||
| Make a change in one of your files and hit save. You should see that it's recompiling. | ||
|
|
||
| Watch mode makes no assumptions about a server, so you will need to provide your own. The most easy way to start a HTTP server is with: |
There was a problem hiding this comment.
The most easy -> The easiest
|
|
||
| ### webpack-dev-server | ||
|
|
||
| webpack-dev-server provides you with a server and live reloading. This is relatively easy to setup. |
There was a problem hiding this comment.
I would scratch "relatively" as it doesn't add value.
|
@bebraw, all your feedback is implemented. I refactored the headings to be more step-by-step. |
Add content for "how to develop" Closes webpack#26.
This is my first try at the "How to develop" page.
According to the stubs I made earlier, I should also include how to use the Node.js API for the watch mode and dev-server. On second thought, this should really be a separate page. For beginners this will be even more confusing. We already teach them 3 ways to develop, with the API variants that would essentially mean 5 ways.
I'm curious to your feedback!