翻译 guides/development

Author: zgayjjf

content/guides/development.md

@@ -5,109 +5,110 @@ contributors:
   - SpaceK33z
 ---
 
-On this page we'll explain how to get started with developing and how to choose one of three tools to develop. It is assumed you already have a webpack configuration file.
+在这一章节，我们将会解释如何开始开发并且如何从三种开发工具中进行选择。这里假设你已经有了一个 webpack 配置文件。
 
-W> Never use any of these tools in production. Ever.
+W> 永远不要在生产环境中使用这些工具，永远不要。
 
-## Adjusting Your Text Editor
+## 调整你的文本编辑器
 
-Some text editors have a "safe write" feature and enable this by default. As a result, saving a file will not always result in a recompile.
+一些文本编辑器有“safe write”（安全写入）功能，并且默认启用。因此，保存文件后并不总是会导致 webpack 重新编译。
 
-Each editor has a different way of disabling this. For the most common ones:
+每个编辑器都有不同的方式来禁用这一功能，以下是一些最常见的：
 
-* **Sublime Text 3** - Add `"atomic_save": false` to your user preferences.
-* **IntelliJ** - use search in the preferences to find "safe write" and disable it.
-* **Vim** - add `:set backupcopy=yes` in your settings.
-* **WebStorm** - uncheck `Use "safe write"` in Preferences > Appearance & Behavior > System Settings
+* **Sublime Text 3** - 在用户设置（preference）中增加 `"atomic_save": false`。
+* **IntelliJ** - 在设置中查找 “safe write”并且禁用它。
+* **Vim** - 在设置中增加 `:set backupcopy=yes`。
+* **WebStorm** - 在 Preferences > Appearance & Behavior > System Settings 中取消选中 `Use "safe write"`。
 
 ## 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.
+当 JavaScript 异常抛出时，你会想知道这个错误发生在哪个文件的哪一行。然而因为 webpack 将文件输出为一个或多个 bundle，所以追踪这一错误会很不方便。
 
-**Source maps** intend to fix this problem. There are a lot of [different options](/configuration/devtool) - each with their own advantages and disadvantages. To get started, we'll use this one:
+**Source maps** 试图解决这一问题。它有很多[不同的选项](/configuration/devtool) - 每一个都有自己的优缺点。首先，我们使用这一个：
 
 ```js
 devtool: "cheap-eval-source-map"
 ```
 
-## Choosing a Tool
+## 选择一个工具
 
-webpack can be used with **watch mode**. In this mode webpack will watch your files, and recompile when they change.
-**webpack-dev-server** provides an easy to use development server with fast live reloading. If you already have a development server and want full flexibility, **webpack-dev-middleware** can be used as middleware.
+webpack 可以在 **watch mode**(监视模式)下使用。在这种模式下，webpack 将监视您的文件，并在更改时重新编译。  
+**webpack-dev-server** 提供了一个易于部署的开发服务器，具有快速的实时重载（live reloading）功能。  
+如果你已经有一个开发服务器并且需要完全的灵活性，可以使用 **webpack-dev-middleware** 作为中间件。  
 
-webpack-dev-server and webpack-dev-middleware use in-memory compilation, meaning that the bundle will not be saved to disk. This makes compiling faster and results in less mess on your file system.
+webapck-dev-server 和 webpack-dev-middleware 使用内存编译，这意味着 bundle 不会被保存在硬盘上。这使得编译十分迅速，并导致你的文件系统更少麻烦。
 
-In most cases **you'll want to use webpack-dev-server**, since it's the easiest to get started with and offers much functionality out-of-the-box.
+在大多数情况下**你会想要使用 webpack-dev-server**，因为这是最简单的开始的方式，并且提供了很多开箱即用的功能。
 
-### webpack Watch Mode
+### webpack Watch Mode（监视模式）
 
-webpack's watch mode watches files for changes. If any change is detected, it'll run the compilation again.
+webpack 的 watch mode 会监视文件的更改。如果检测到任何的更改，它都会再次执行编译。 
 
-We also want a nice progress bar while it's compiling. Let's run the command:
+我们也希望在编译时有一个好看的进度条。运行以下命令：
 
 ```bash
 webpack --progress --watch
 ```
 
-Make a change in one of your files and hit save. You should see that it's recompiling.
+在你的文件中做一点更改并且保存。你应该会看到 webpack 正在重新编译。
 
-Watch mode makes no assumptions about a server, so you will need to provide your own. An easy server is [`serve`](https://github.com/tj/serve). After installing (`npm i serve -g`), you can execute it in the directory where the outputted files are:
+watch mode 对服务器没有预设，所以你需要自己提供一个。一个简易的服务器是 [`serve`](https://github.com/tj/serve)。安装之后（`npm i serve -g`），你可以在输出的文件目录下运行它：
 
 ```bash
 serve
 ```
 
-After each compilation, you will need to manually refresh your browser to see the changes.
+在每一次编译后，你需要手动刷新你的浏览器来查看更改。
 
 ### webpack-dev-server
 
-webpack-dev-server provides you with a server and live reloading. This is easy to setup.
+webpack-dev-server 为你提供了一个服务器和实时重载（live reloading） 功能。这很容易设置。
 
-To prepare, make sure you have a `index.html` file that points to your bundle. Assuming that `output.filename` is `bundle.js`:
+在开始前，确定你有一个 `index.html` 文件指向你的 bundle。假设 `output.filename` 是 `bunlde.js`。
 
 ```html
 <script src="/bundle.js"></script>
 ```
 
-Start with installing `webpack-dev-server` from npm:
+首先从 npm 安装 `webpack-dev-server`：
 
 ```bash
 npm install webpack-dev-server --save-dev
 ```
 
-When it's done installing, you should be able to use `webpack-dev-server` like this:
+安装完成之后，你应该可以使用 `webpack-dev-server` 了，方式如下：
 
 ```bash
 webpack-dev-server --open
 ```
 
-T> If your console says it can't find the command, try running `node_modules/.bin/webpack-dev-server`. Optimally you would add the command to your `package.json`, like this: `"scripts": { "start": "webpack-dev-server" }`.
+T> 如果你的控制台说无法找到该命令，尝试运行 `node_modules/.bin/webpack-dev-server`。正常情况下你应该把该命令加在 `package.json` 中，例如：`"scripts": {"start": "webpack-dev-server"}`。 
 
-The command above should automatically open your browser on `http://localhost:8080`.
+上述命令应该自动在浏览器中打开 `http://localhost:8080`。
 
-Make a change in one of your files and hit save. You should see that the console is recompiling. After that's done, the page should be refreshed. If nothing happens in the console, you may need to fiddle with [`watchOptions`](/configuration/dev-server#devserver-watchoptions-).
+在你的文件中做一点更改并且保存。你应该可以在控制台中看到正在编译。完成之后，页面应该会刷新。如果控制台中什么都没发生，你可能需要调整下 [`watchOptions`](/configuration/dev-server#devserver-watchoptions-)。
 
-Now you have live reloading working, you can take it even a step further: Hot Module Replacement. This is an interface that makes it possible to swap modules **without a page refresh**. Find out how to [configure HMR](/guides/hmr-react).
+现在你有了实时重载功能，你甚至可以更进一步：Hot Module Replacement（热模块替换）。这是一个接口，使得可以替换模块**而不需要刷新页面**。查看如何[配置 HMR](/guides/hmr-react)。
 
-By default **inline mode** is used. This mode injects the client - needed for live reloading and showing build errors - in your bundle. With inline mode you will get build errors and warnings in your DevTools console.
+默认情况下 webpack 会使用**inline mode**（内联模式）。这种模式在你的 bundle 中注入客户端（用来 live reloading 和展示构建错误）。Inline 模式下，你会在你的 DevTools 控制台中看到构建错误。
 
-webpack-dev-server can do many more things such as proxying requests to your backend server. For more configuration options, see the [**devServer documentation**](/configuration/dev-server).
+webpack-dev-server 可以做很多事情，比如转发请求到你的后端服务器。更多配置项，请参阅 [**devServer documentation**](/configuration/dev-server)。
 
 ### webpack-dev-middleware
 
-webpack-dev-middleware works for connect-based middleware stacks. This can be useful if you already have a Node.js server or if you want to have full control over the server.
+webpack-dev-middleware 适用于基于链接的中间件环境（connect-based middleware stacks）。如果你已经有一个 Node.js 服务器或者你想要完全控制服务器，这将很实用。
 
-The middleware will cause webpack to compile files in-memory. When a compilation is running, it will delay the request to a file until the compilation is done.
+这个中间件会导致 webpack 在内存中编译文件。当一个编译正在执行的时候，它会将对于文件的请求延迟，直到编译完成。
 
-W> This is intended for advanced users. webpack-dev-server is much easier to use.
+W> 该中间件是为进阶用户使用的。对于一般用户，webpack-dev-server 更容易使用。
 
-Start with installing the dependencies from npm:
+首先从 npm 上安装依赖：
 
 ```bash
 npm install express webpack-dev-middleware --save-dev
 ```
 
-After installing, you can use the middleware like this:
+安装完成后，可以按如下所示使用该中间件：
 
 ```js
 var express = require("express");
@@ -119,19 +120,19 @@ var app = express();
 var compiler = webpack(webpackConfig);
 
 app.use(webpackDevMiddleware(compiler, {
-  publicPath: "/" // Same as `output.publicPath` in most cases.
+  publicPath: "/" // 大部分情况下和 `output.publicPath`相同
 }));
 
 app.listen(3000, function () {
   console.log("Listening on port 3000!");
 });
 ```
 
-Depending on what you've used in `output.publicPath` and `output.filename`, your bundle should now be available on `http://localhost:3000/bundle.js`.
+根据你在 `output.publicPath` 和 `output.filename` 中设置的内容，你的 bundle 现在应该在 `http://localhost:3000/bundle.js` 中可以看到了。
 
-By default, **watch mode** is used. It's also possible to use **lazy mode**, which will only recompile on a request to the entry point.
+默认情况下会使用**watch mode**。也可以使用 **lazy mode**，这使得 webpack 只在对入口点进行请求时再进行重新编译。
 
-To compile only on a request to the entry `bundle.js`:
+设置仅在对入口 `bundle.js` 请求时进行编译：
 
 ```js
 app.use(webpackDevMiddleware(compiler, {
@@ -140,10 +141,9 @@ app.use(webpackDevMiddleware(compiler, {
 }));
 ```
 
-There are many more options you can use. For all configuration options, see the [**devServer documentation**](/configuration/dev-server).
+还有许多其他的选项可以设置。所有的设置项请查阅 [**devServer 文档**](/configuration/dev-server)。
 
-
-## References
+## 参考
 
 * [SurviveJS - Automatic Browser Refresh](http://survivejs.com/webpack/developing-with-webpack/automatic-browser-refresh/)