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

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来启动服务器。

有任何想法吗？

- Smartkid

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

- Smartkid

Answer 2

我遇到了相同的问题，后来发现是因为在webpack.config.js中我的src和dist路径缺少尾随斜杠所致。

- Joe Morgan

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'),
  }
};

- Ankit Bhatia

Answer 4

我曾经也遇到过同样的问题，我的目录结构与你的几乎完全相同。文档中指出：“不能为output.filename指定绝对路径。”考虑到问题的复杂性，我并没有看到使用path模块的实用性。

也许你可以通过以下方式解决这个问题：

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

- SwankyLegg