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指定的路径；它只能通过网络服务器，而我两者都想要。

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

Answer 1

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

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

webpack --watch

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

webpack-dev-server

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

Answer 2

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

gajus/write-file-webpack-plugin

Answer 3

[原创]

出现this is now a built-in option。您可以在 webpack 配置文件中添加以下内容。

devServer: {
  writeToDisk: true
}

看起来这是从 webpack-dev-server version 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

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

bundle.js file output and webpack-dev-server

webpack

webpack-dev-server