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服务器访问，而我希望两者都可以。

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

- mguijarr

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

- chris

Answer 2

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

根据我的经验，解决这个问题的方法是同时运行两个实例，如果你想要实际构建和webpack-dev-server。因此，在一个终端窗口中输入

webpack --watch

运行 (webpack --watch将重新构建实际的bundle)。然后在另一个终端中执行。

webpack-dev-server

运行中，(webpack-dev-server将实时重新加载并从内存中提供新的构建).

- Nader Dabit

---

好的，明白了...那么常见的做法是什么呢？是在开发过程中使用webpack-dev-server，在生产环境下只有在创建捆绑包时才调用webpack吗？人们什么时候生成bundle.js文件？ - mguijarr

@mguijarr 尽管我大多数时候都是这样做的（在开发过程中使用webpack-dev-server，然后在准备好生产环境时调用webpack），但我不确定这是否是最佳实践，或者是否有更好/更有效的方法，欢迎任何人对此提出看法。 - Nader Dabit

"在内存中"，这是我期望的关键字。因为该捆绑包实际上已经被提供，但找不到它。 - KeitelDOG

好的，我有点困惑。这是不是意味着 webpack-dev-server 应该与 webpack watch 一起使用？还是说有一种方法可以使用 webpack dev server 来打包文件？ - henhen

Answer 3

这个插件会强制webpack-dev-server也写入打包文件，消除在终端中运行两个进程的需要。 gajus/write-file-webpack-plugin

- Lounge9