新的 webpack-dev-server发布，并且支持writeToDisk选项。

devServer: {
  writeToDisk: true
}

您可以将start脚本定义更改为：

"start": "webpack --watch & webpack-dev-server --inline --progress --colors".

这会将 webpack watch-and-rebuild 过程发送到后台，以便您还可以在使用webpack-dev-server.

编辑：

这些插件中的任何一个都可以满足您的需求：

• https://github.com/gajus/write-file-webpack-plugin
• https://github.com/FormidableLabs/webpack-disk-plugin

webpack-dev-server 使用“虚拟”Express 服务器和 Sock.js 来模拟在您的机器上运行的服务器。关于编译，webpack-dev-server 会bundle在检测到代码更改时重新编译。然而，这种重新编译是从内存中提供的，而不是项目的build目录（或者，在您的情况下，是dist目录）。从文档：

使用此配置， webpack-dev-server 将为您build文件夹中的静态文件提供服务。它将监视您的源文件，并在更改时重新编译包。

关于写入磁盘， webpack-dev-server 不会这样做。上面写的内容部分解决了这一问题。此外，请注意以下同样来自 Webpack 文档的内容：

这个修改后的包是从内存中指定的相对路径提供的publicPath（请参阅 API）。它不会写入您配置的output目录。如果捆绑已存在于同一 URL 路径中，则内存中的捆绑优先（默认情况下）。

要写入磁盘，请使用普通的 webpack module。当然，正如您的问题所暗示的那样，每次更改后手动重新编译是乏味的。为了解决这个麻烦，包括watch标志。从终端，您可以执行命令：

$ webpack --watch

但是，我更喜欢将其委托给 NPM 脚本。请注意，-w下面的标志等效于编写--watch.

// NPM `scripts` field:
"watch": "webpack -w"

如果您想在运行 webpack-dev-server 的同时重新编译您的更改并写入您的输出目录，您可以添加一个额外的 NPM 脚本，如下所示：

"scripts": {
  "serve": "npm run watch && npm run start",
  "start": "webpack-dev-server --progress --colors",
  "watch": "webpack -w"
}

然后，在您的终端中，只需执行$ npm run serve即可完成此操作。

如果您对自动重新加载的额外便利感兴趣，可以通过在 Webpack 配置文件的 plugins 字段中定义以下内容来实现：

new webpack.HotModuleReplacementPlugin()

注意：这可能需要额外的 Babel 配置设置。如果我是你，我会query从你的 babel 加载器中取出这个字段，而是将你的 Babel 配置委托给一个外部.babelrc文件。与热重载兼容的好用程序可能如下所示：

{
  "presets": ["env", "es2015", "react"],
  "plugins": ["react-hot-loader/babel"]
}

附带说明一下，我创建了一个样板存储库，用于轻松启动具有我想要的结构的项目。该的WebPack配置感兴趣的可能，具体。特别是，它采用 Webpack 2 并包括其他构建工具，如 Babel（用于转译）、ESLint（语法检查器）以及对 CSS/Sass 和各种其他文件格式的支持。

使用webpack-dev-server v4.0.0+, devMiddleware：

devServer: {
  devMiddleware: {
    writeToDisk: true
  }
}

webpack-dev-server 从内存中服务文件，你可以用webpack-simple-serve替换 webpack-dev-server ，它使用 webpack 的 watch 功能，将编译后的文件写入磁盘并使用serve-handler来服务。