javascript - Webpack dev-server - 如何提供带有更新 Assets 的静态文件？

Question

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

我想要一个非常简单的设置。把所有东西都放在应用程序中，执行 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 但提供更新的 Assets ？

终于明白了。

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、图像等)的目录。

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