本指南中的工具仅用于开发环境，请不要在生产环境中使用它们！使用source map当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到 bundle.js。这并通常没有太多帮助，因为你可能需要准确地知道错误来自于哪个源文件。为了更容易地追踪错误和警告，JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。选择一个开发工具每次要编译代码时，手动运行 npm run build 就会变得很麻烦。webpack 中有几个不同的选项，可以帮助你在代码发生变化后自动编译代码：webpack’s Watch Modewebpack-dev-serverwebpack-dev-middleware多数场景中，你可能需要使用 webpack-dev-server，但是不妨探讨一下以上的所有选项。使用观察模式你可以指示 webpack “watch” 依赖图中的所有文件以进行更改。如果其中一个文件被更新，代码将被重新编译，所以你不必手动运行整个构建我们添加一个用于启动 webpack 的观察模式的 npm script 脚本：修改package.json文件{… “scripts”: { “test”: “echo "Error: no test specified" && exit 1”, “watch”: “webpack –watch”, “build”: “webpack” },…}现在，你可以在命令行中运行 npm run watch，就会看到 webpack 编译代码，然而却不会退出命令行。这是因为 script 脚本还在观察文件。现在,保存文件并检查终端窗口。应该可以看到 webpack 自动重新编译修改后的模块！唯一的缺点是，为了看到修改后的实际效果，你需要刷新浏览器。如果能够自动刷新浏览器就更好了，可以尝试使用 webpack-dev-server，恰好可以实现我们想要的功能使用 webpack-dev-serverwebpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。让我们设置以下：安装webpack-dev-servercnpm install –save-dev webpack-dev-server修改配置文件，告诉开发服务器(dev server)，在哪里查找文件：修改webpack.config.js…module.exports = { … devServer: { contentBase: ‘/dist’ }], …};以上配置告知 webpack-dev-server，在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。让我们添加一个 script 脚本，可以直接运行开发服务器(dev server)：修改package.json{ … “scripts”: { “test”: “echo "Error: no test specified" && exit 1”, “watch”: “webpack –watch”, “start”: “webpack-dev-server –open”, “build”: “webpack” }, …}现在，我们可以在命令行中运行 npm start，就会看到浏览器自动加载页面。如果现在修改和保存任意源文件，web 服务器就会自动重新加载编译后的代码。试一下！使用 webpack-dev-middlewarewebpack-dev-middleware 是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器(server)。 webpack-dev-server 在内部使用了它，同时，它也可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求。接下来是一个 webpack-dev-middleware 配合 express server 的示例。首先，安装 express 和 webpack-dev-middleware：cnpm install –save-dev express webpack-dev-middleware接下来我们需要对 webpack 的配置文件做一些调整，以确保中间件(middleware)功能能够正确启用：修改webpack.config.js…module.exports = {… output: { filename: ‘[name].bundle.js’, // __dirname表示当前文件所在的目录的绝对路径 path: path.resolve(__dirname, ‘dist’), publicPath: ‘/’ }};publicPath 也会在服务器脚本用到，以确保文件资源能够在 http://localhost:3000 下正确访问，我们稍后再设置端口号。下一步就是设置我们自定义的 express 服务：在根目录下添加一个server.js文件const express = require(’express’);const webpack = require(‘webpack’);const webpackDevMiddleware = require(‘webpack-dev-middleware’);const app = express();const config = require(’./webpack.config.js’);const compiler = webpack(config);// Tell express to use the webpack-dev-middleware and use the webpack.config.js// configuration file as a base.app.use(webpackDevMiddleware(compiler, { publicPath: config.output.publicPath}));// Serve the files on port 3000.app.listen(3000, function () { console.log(‘Example app listening on port 3000!\n’);});现在，添加一个 npm script，以使我们更方便地运行服务：修改package.json文件{… “scripts”: { “test”: “echo "Error: no test specified" && exit 1”, “watch”: “webpack –watch”, “start”: “webpack-dev-server –open”, “server”: “node server.js”, “build”: “webpack” },…}现在，在你的终端执行 npm run server，将会有类似如下信息输出：现在，打开浏览器，跳转到 http://localhost:3000，你应该看到你的webpack 应用程序已经运行！调整文本编辑器使用自动编译代码时，可能会在保存文件时遇到一些问题。某些编辑器具有“安全写入”功能，可能会影响重新编译。要在一些常见的编辑器中禁用此功能，请查看以下列表：Sublime Text 3 - 在用户首选项(user preferences)中添加 atomic_save: “false”。IntelliJ - 在首选项(preferences)中使用搜索，查找到 “safe write” 并且禁用它。Vim - 在设置(settings)中增加 :set backupcopy=yes。WebStorm - 在 Preferences > Appearance & Behavior > System Settings 中取消选中 Use “safe write”。