Webpack：如何使用 webpack-dev-server 编译、写入磁盘和提供静态内容 (js/css)

Question

我想构建我的 js/css 代码，将其写入磁盘并使用 webpack-dev-server 在单个命令中提供它。我不想为生产模式设置另一台服务器。我们该怎么做呢？在下面分享我的 webpack.config.js 文件内容：

module.exports = {
watch: true,
entry: [
    './src/index.js'
],
output: {
    path: __dirname +'/dist/',
    publicPath: '/dist/',
    filename: 'bundle.js'
},
module: {
    loaders: [
        {
            exclude:/(node_modules)/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'react']
            }
        }
    ]
},
devServer: {
    historyApiFallback: true,
    contentBase: './'
}
};

请在下面找到 package.json 中使用的启动脚本：

"start": "webpack-dev-server --progress --colors"

我正在运行“npm run start”。请帮忙。

Answer 1

新的 webpack-dev-server 是released，它支持writeToDisk 选项。

devServer: {
  writeToDisk: true
}

Answer 2

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

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

这会将 webpack 监视和重建过程发送到后台，以便您在使用 webpack-dev-server 更改修改后的模块时也可以热重载。

编辑：

这些插件中的任何一个都可以做你想做的事：

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

Answer 3

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

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

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

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

要写入磁盘，请使用普通的 webpack 模块。当然，正如您的问题所暗示的那样，每次更改后手动重新编译都很乏味。要解决这个问题，请包含 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 进行额外的配置设置。如果我是你，我会从你的 babel 加载器中取出 query 字段，而是将你的 Babel 配置委托给外部的 .babelrc 文件。一个与热重载兼容的好用的可能看起来像这样：

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

---

顺便说一句，我创建了一个boilerplate repo，以便轻松启动具有我想要的结构的项目。 Webpack configuration 可能特别感兴趣。特别是，它采用了 Webpack 2 并包含其他构建工具，例如 Babel（用于转译）、ESLint（语法检查器）以及对 CSS/Sass 和各种其他文件格式的支持。

Answer 4

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

devServer: {
  devMiddleware: {
    writeToDisk: true
  }
}

Answer 5

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