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可以請求綁定。