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

Question

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

我想要一个非常简单的设置。采取一切应用程序，执行js转换，然后在远程服务。 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/。然后在dev服务器上，从该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是（AFAIK）甚至没有被webpack-dev-server使用，因为它从内存构建并提供捆绑。唯一需要的是output.filename和output.publicPath（尽管我相信后者对于Webpack v2也是可选的，但是它会尝试并确定一个公共路径本身），它们用于确定通过URL可以请求绑定。