Question

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

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

启动服务器

有什么想法吗？

Answer 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: {
    }
};

Answer 2

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

Answer 3

我建议访问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'),
  }
};

Answer 4

我在同样的事情上苦苦挣扎，我的目录结构几乎完全匹配你的。 The docs声明＆＃34;您不能为[output.filename]指定绝对路径。＆＃34;鉴于问题的复杂性，我没有看到使用路径模块的效用。

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

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

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

4 个答案: