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,
    }
}

我将此解释为＆＃34;在使用babel-loader将所有js文件转换为bundle.js之后，在index.js中启动bundle。然后在开发服务器上，从该dist文件夹中提供js内容并压缩。＆＃34;

我的脱节是了解dist/如何发挥作用。我咨询了index.html。

我可以将https://webpack.js.org/configuration/dev-server/#devserver路径更改为contentBase，但它不会显示目录列表，但它不会更新捆绑包。

tldr：

如何让开发服务器指向.但是提供更新的资产？

最后，弄清楚了。

index.html

我喜欢说我有顿悟的说法，但我只是发布选项，直到它有效。

Answer 1

如果contentBase为./dist，则预计该目录中会存在index.html。它基本上是webpack-dev-server查找静态文件（HTML，图像等）的目录。

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

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

1 个答案: