Webpack dev-server - 如何使用更新的资产提供静态文件？

Question

所以我的问题是当我转到http://localhost:8080/webpack-dev-server/ 时，我可以让 webpack 提供目录列表。如果我修改开发服务器路径，那么它不会对包进行任何更改。

我想要一个非常简单的设置。将所有内容放入 app，执行 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 开始捆绑，在使用 babel-loader 转换所有 js 文件后，将名为 bundle.js 的文件放入 dist/。然后在开发服务器上，从该 dist 文件夹提供 js 内容并压缩。”

我的脱节在于了解index.html 是如何参与其中的。 我咨询过：https://webpack.js.org/configuration/dev-server/#devserver.

我可以将contentBase 路径更改为.，它不会显示目录列表，但不会更新捆绑包。

tldr：

如何让开发服务器指向 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',
    }
}

我很喜欢有人说我顿悟了，但我只是向选项发送了垃圾邮件，直到它起作用为止。

Answer 1

如果contentBase 是./dist，那么index.html 应该存在于该目录中。它基本上是webpack-dev-server 查找静态文件（HTML、图像等）的目录。

它不一定必须与您用于捆绑的相同； output.path 甚至没有被 webpack-dev-server 使用（AFAIK），因为它从内存中构建和服务包。唯一需要的是output.filename和output.publicPath（虽然我相信后者对于Webpack v2也是可选的，但是它会尝试自己确定一个公共路径），它们用于通过URL确定捆绑包可以是请求。