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 发布，支持writeToDisk选项。

devServer: {
  writeToDisk: true
}

Answer 2

您可以将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

Answer 3

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

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

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

这个修改后的包在publicPath指定的相对路径中从内存中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"]
}

---

附带说明一下，我创建了一个样板存储库，用于轻松启动具有我想要的结构的项目。 Webpack 配置可能特别感兴趣。 特别是，它采用 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-simple-serve替换 webpack-dev-server ，它使用 webpack 的 watch 功能，将编译后的文件写入磁盘并使用serve-handler来服务。