Question

我从头开始自学webpack，当我更改app文件中的.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来说有点新手。

我已经关闭了＃34;安全写作＆＃39;在我的IDE和我的文件结构是这样的：

这是我的index.html ...

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

*更新* 添加publicPath：'dist/＆＃39;到output对象似乎有用......但我不确定这是否是解决我问题的正确方法。

Answer 1

捆绑文件仍然包含旧邮件，并且未生成。

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/'会使webpack-dev-server在命中/dist/bundle.js时从内存中提供捆绑服务，无论文件系统中是否存在该文件。

设置output.publicPath也会影响一些包含资源的加载器，如example of html-loader中所示。如果您不希望这种效果，则可以使用devServer.publicPath来改变webpack-dev-server的行为。但正如文档中所提到的那样，建议他们保持一致。

webpack-dev-server在保存文件时不更新bundle

1 个答案: