保存文件时 webpack-dev-server 不更新包答案

【问题标题】：webpack-dev-server not updating bundle when saving file保存文件时 webpack-dev-server 不更新包
【发布时间】：2017-02-26 20:38:54
【问题描述】：

我正在从头开始自学 webpack，当我更改应用文件中的 .js 并显示更改时，我正在尝试使用 webpack-dev-server 实时更新浏览器。假设我有以下package.json

{
  "name": "webpack-babel",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "serve": "webpack-dev-server --hot",
    "start": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.3.2",
    "babel-preset-es2015": "^6.22.0",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.1"
  }
}

这是我的 webpack.config.json

const path = require('path');

    const config = {
        entry: './app/index.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js'
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    loader: 'babel-loader',
                    query: {
                        presets: ['es2015']
                    }
                }
            ],
        }
    };

    module.exports = config;

我的 ./app/index.js 中有以下代码（这里没什么疯狂的）：

let message = 'I love socks and snacks !';
console.log(message);

当我运行 npm run serve 时，将我的 app/index.js 中的消息更改为 'I love cola and snacks !!!' 并保存终端并编译，但浏览器中没有任何更新。捆绑文件仍然包含旧消息并且没有生成。我究竟做错了什么？我几个小时前才开始尝试这个，所以我是 webpack 的新手。

我在 IDE 中关闭了“安全写入”，我的文件结构是这样的：

这是我的 index.html...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>

* UPDATE * 将 publicPath: 'dist/' 添加到 output 对象似乎有效...但我不确定这是否是解决我的问题的正确方法。

【问题讨论】：

webpack 开发服务器不会向磁盘写入任何内容。这一切都在记忆中提供。

标签： npm webpack webpack-dev-server

【解决方案1】：

捆绑文件仍然包含旧消息并且没有生成。

webpack-dev-server 不创建任何文件，而是在命中相应路径时从内存中提供包。默认是/，所以当你尝试加载/bundle.js时，你会从内存中获取bundle。

但是在您的index.html 中，您请求/dist/bundle.js。它首先可以找到它的唯一原因是因为您生成了它并且它实际上存在于您的文件系统中。要清楚，如果你去：

http://localhost:8080/dist/bundle.js

你从你的文件系统中得到这个包，但是当你去：

http://localhost:8080/bundle.js

您通过webpack-dev-server 从内存中获取包，尽管它在您的文件系统中不存在。

如您已正确检查，您可以使用publicPath 选项更改该路径。因此，设置publicPath: '/dist/' 将使webpack-dev-server 在/dist/bundle.js 被命中时从内存中提供捆绑包，无论该文件是否存在于您的文件系统中。

设置output.publicPath 也会影响一些包含资产的加载器，如example of html-loader 所示。如果您不希望这种效果，您可以改用devServer.publicPath，仅更改webpack-dev-server 的行为。但正如文档中所述，建议它们相同。

【讨论】：

感谢您如此详尽的解释！
嗨，Michael，我的 webpack 配置有问题，你能检查一下我的帖子吗？ stackoverflow.com/questions/60065484/…

【解决方案2】：

根据最新的 webpack DOC，devServer 配置应该是这样的。

devServer: {
  static: './dist/',
  hot: true,
  devMiddleware: {
      publicPath: '/dist/',
      writeToDisk: true,
   },    
 }

【讨论】：