webpack - bundle.js 文件输出和 webpack-dev-server

Question

我的 webpack.config 文件中有这个输出配置：

config = { 
          ...
          output: {
              path: path.resolve(__dirname, 'dist'),
              filename: 'bundle.js',
              publicPath: 'http://localhost:8090/'
          },
... }

bundle.js 未写入path;中指定的路径 它只能通过网络服务器获得，而我两者都想要。

我应该更改什么以同时拥有文件和 Web 服务器？

Answer 1

[原来的]

看来这现在是一个内置选项。您可以在 webpack 配置文件中添加以下内容。

devServer: {
  writeToDisk: true
}

看起来这是从webpack-dev-server 版本 3.1.10开始添加的

---

[2021-11-09] Webpack 5 Webpack 5中的语法似乎发生了变化（您现在将配置选项传递给处理资产的特定中间件）：

module.exports = {
  devServer: {
    devMiddleware: {
      writeToDisk: true,
    },
  },
};

Webpack v4 文档：https: //v4.webpack.js.org/configuration/dev-server/#devserverwritetodisk- Webpack v5 文档：https ://webpack.js.org/configuration/dev-server/#devserverdevmiddleware

Answer 2

当你运行 webpack-dev-server 时，你实际上并没有打包和重建 webpack 包，它只是从内存中提供服务。

以我的经验，解决这个问题的方法是让两个实例运行，如果你想拥有实际的构建以及 webpack-dev-server。所以，在一个终端窗口中有

webpack --watch

运行，（webpack --watch 将重建实际的包）。然后，在另一个终端有

webpack-dev-server

运行，（webpack-dev-server 将实时重新加载并从内存中提供新版本）。

Answer 3

该插件将强制webpack-dev-server编写捆绑文件，从而无需在终端中运行两个进程。

gajus/write-file-webpack-plugin