Javascript Web包开发服务器-如何使用更新的资产为静态文件提供服务？

所以我的问题是，当我转到

http://localhost:8080/webpack-开发服务器/

。如果我修改了dev服务器路径，那么它不会对包进行任何更改

我想要一个非常简单的设置。在应用程序中获取所有内容，执行js转换，然后在dist中为其提供服务。

index.html

如何适应它

我有以下目录结构：

app
  index.js
dist
  bundle.js
index.html
webpack.config.js

在webpack.config的内部，我有：

const path = require('path')

module.exports = {
    entry: './app/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '.',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /(node_modules)/,
            }
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
    }
}

我将其解释为“在index.js处启动bundle，使用babel loader转换所有js文件后，将名为

bundle.js

的文件放入

dist/

中。然后在开发服务器上，从该dist文件夹提供js内容并进行压缩。”

我的分歧在于理解

index.html

是如何发挥作用的。 我咨询过：

https://webpack.js.org/configuration/dev-server/#devserver

我可以将

contentBase

路径更改为

，它不会显示目录列表，但不会更新捆绑包

tldr:

如何使dev服务器指向

index.html

，但服务于更新的资产

最后，我明白了

const path = require('path')

module.exports = {
    entry: './app/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /(node_modules)/,
            }
        ]
    },
    devServer: {
        contentBase: 'dist',
    }
}

---

我很想说我有一个顿悟，但我只是垃圾邮件的选择，直到它的工作

如果

contentBase

是

/dist

，则该目录中应存在

index.html

。它基本上是

webpack dev server

查找静态文件（HTML、图像等）的目录

---

它不一定与您用于捆绑包的内容相同

output.path

甚至不被

webpack dev server

使用，因为它从内存构建和服务包。唯一需要的是

output.filename

和

output.publicPath

（虽然我认为后者在Webpack v2中也是可选的，但随后它会尝试确定一个公共路径本身），它们用于通过URL确定可以请求捆绑包。

Ok。现在这是有道理的。谢谢我的新问题是我无法让开发服务器更新捆绑包。这有点奇怪，因为我有一个非常类似的项目设置，它工作得很好。您的意思是没有更新捆绑包文件吗？因为正如我所说，

webpack dev server

完全从内存构建并提供该文件，它不会触及实际的捆绑文件（为此，您可以运行

webpack-w

）。如果我在

app/index.js

中更改代码，则不会显示该结果。如果我添加警报，页面将刷新，并且不会调用警报。如果我在没有dev服务器的情况下运行webpack命令，它就会工作。只有在使用dev服务器时，它才不会更新。我认为这无关紧要，但请尝试提供一个到

条目

的完整（绝对）路径。当您更改文件时，在

webpack dev server

的控制台上不会发生任何事情，但是如果条目适用于webpack，它是否也适用于dev服务器？我已经阅读了文档并复制了它们的配置。有时候，我会想念gulp：(