webpack-dev-server在保存文件时未更新捆绑包

Question

webpack-dev-server在保存文件时未更新捆绑包

8

我正在自学Webpack，并尝试使用webpack-dev-server实现当我更改应用程序文件中的.js时，自动更新浏览器并显示更改内容。假设我有以下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中的信息更改为'我爱可乐和零食!!!'并保存，终端会编译但浏览器中没有更新。打包文件仍然包含旧信息并未生成。我做错了什么？我只是几个小时前开始尝试使用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>

* 更新 * 在 output 对象中添加 'dist/' 作为 publicPath 似乎可以解决我的问题... 但我不确定这是否是正确的解决方案。

- Mike Sav

2

webpack开发服务器不会将任何内容写入磁盘，而是全部保存在内存中提供服务。 - Andy Ray

2个回答

6

根据最新的webpack文档，devServer配置应该像这样。

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

- menomanabdulla

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Jungo · Accepted Answer

打包文件仍然包含旧消息并且未被生成。

webpack-dev-server 不会创建任何文件，但在访问相应路径时从内存中提供捆绑包。默认情况下，这是 /，因此当您尝试加载 /bundle.js 时，将从内存中获取捆绑包。

但是在您的 index.html 中，您请求 /dist/bundle.js。它之所以能够找到它，唯一的原因是您已经生成了它，并且它实际上存在于您的文件系统中。请注意，如果您转到：

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

您可以从文件系统中获取捆绑包，但是当您前往：

http://localhost:8080/bundle.js

通过webpack-dev-server你可以从内存中获取打包后的文件，即使在你的文件系统中并不存在。

正如你正确地检查到的那样，你可以使用publicPath选项来更改路径。因此，设置publicPath: '/dist/'将使得当访问/dist/bundle.js时，webpack-dev-server会从内存中提供打包后的文件，而不管该文件在你的文件系统上是否存在。

设置output.publicPath也会影响一些包含资源的loader，就像html-loader示例中所看到的那样。如果你不想产生这种影响，你可以使用devServer.publicPath来仅改变webpack-dev-server的行为。但正如文档中提到的，建议它们保持相同。