Webpack-dev-server 提供旧文件内容答案

【问题标题】：Webpack-dev-server serves old file contentWebpack-dev-server 提供旧文件内容
【发布时间】：2016-03-07 03:28:13
【问题描述】：

我有一个非常简单的项目：

appdir +- app +- main.js +- build +- bundle.js +- index.html +- webpack.config.js

webpack.config.js：

var path=require("path");

module.exports = {
    entry: path.resolve(__dirname, "./app/main.js"),
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js"
    }
};

在我更改main.js 后，webpack-dev-server 似乎检测到更改并执行重新捆绑bundle.js，但浏览器仍然收到main.js 的旧内容。

我通过执行webpack-dev-server webpack.config.js来启动服务器

有什么想法吗？

【问题讨论】：

标签： webpack webpack-dev-server

【解决方案1】：

查看 https://github.com/webpack/webpack-dev-server/issues/24 ，我将 publicPath 添加到 webpack.config.js 并且 webpack 现在为捆绑包提供新内容^_^

var path=require("path");

module.exports = {
    entry: path.resolve(__dirname, "./app/main.js"),
    output: {
        path: path.resolve(__dirname, "build"),
        filename: "bundle.js",
        publicPath: "/build/",
    },
    devServer: {
    }
};

【讨论】：

【解决方案2】：

我遇到了同样的问题，结果是我的 src 和 webpack.config.js 中的 dist 路径中缺少尾部斜杠。

【讨论】：

【解决方案3】：

我也在为同样的事情而苦苦挣扎，我的目录结构几乎与你的完全匹配。 The docs 声明“您不得指定绝对路径 [for output.filename]。”鉴于问题的复杂性，我没有看到使用路径模块的实用程序。

您可以通过这种方式解决问题：

module.exports = {
    entry: "./app/main.js"
    output: {
        filename: "./build/bundle.js"
    }
};

【讨论】：

【解决方案4】：

我建议访问https://webpack.js.org/configuration/dev-server/#devserver 并检查那里的配置。下面的代码将像我一样解决您的问题。

var path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
  }
};

【讨论】：