Webpack dev-server - 如何使用更新后的资源文件提供静态文件服务？

Question

我的问题是，当我访问http://localhost:8080/webpack-dev-server/时，webpack可以提供目录列表。如果我修改了dev server路径，则不会对bundle进行任何更改。

我想要一个非常简单的设置。将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,
    }
}

我认为这句话的意思是：“使用babel-loader转换所有js文件后，从index.js开始打包，并将该文件命名为bundle.js放入dist/文件夹中。然后在开发服务器上，从该文件夹中提供js内容并进行压缩。”

我不理解的是如何与index.html配合。我参考了https://webpack.js.org/configuration/dev-server/#devserver 。

如果我将contentBase路径更改为“.”，它将不会显示目录列表，但不会更新bundle。

简而言之：如何使开发服务器指向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',
    }
}

我很想说我有所顿悟，但实际上只是不停地尝试选项直到它起作用了。

- user3162553

Answer 1

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

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

- robertklep

---

好的，现在我明白了。谢谢！我的新问题是，我无法让开发服务器更新捆绑包。 - user3162553

有点奇怪，因为我有一个非常类似的项目设置，而且它运行得很好。你是说绑定文件没有更新吗？因为就像我说的那样， webpack-dev-server 会完全从内存中构建和提供该文件，它不会触及实际的绑定_文件_（要做到这一点，你需要运行 webpack -w）。 - robertklep

如果我更改app/index.js中的代码，它不会展示结果。如果我添加警告，页面将刷新，但不会调用警告。如果我在没有开发服务器的情况下运行webpack命令，它可以正常工作。只有在使用开发服务器时，才无法更新。 - user3162553

现在我的devServer选项看起来像这样：publicPath: path.join(__dirname, 'dist'), contentBase: path.join(__dirname, 'dist'), 它现在可以在更改时更新。但是更新仍然提供旧的内容！ - user3162553

publicPath 不应该是绝对路径，它是 URL 中的前缀，当 webpack-dev-server 从中请求 bundle 时会查找它。 - robertklep