Webpack dev-server - 如何提供更新資產的靜態文件？

所以我的問題是，當我去http://localhost:8080/webpack-dev-server/時，我可以讓webpack提供目錄列表。如果我修改了dev服務器路徑，那麼它不會對該包進行任何更改。Webpack dev-server - 如何提供更新資產的靜態文件？

我想要一個非常簡單的設置。採取一切應用程序，執行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', 
    } 
}

我喜歡的說，我有一個頓悟，但我只是垃圾郵件的選項，直到它的工作。

來源

2017-04-08 user3162553

如果contentBase是./dist，那麼index.html預計將存在於該目錄中。它基本上是webpack-dev-server將查找靜態文件（HTML，圖像等）的目錄。

它不一定必須與您用於捆綁的相同; output.path是（AFAIK）甚至沒有被webpack-dev-server使用，因爲它從內存構建並提供捆綁。唯一需要的是output.filename和output.publicPath（儘管我相信後者對於Webpack v2也是可選的，但是它會嘗試並確定一個公共路徑本身），它們用於確定通過URL可以請求綁定。

來源

2017-04-08 20:40:48 robertklep

好的。這是有道理的。謝謝！我的新問題是我無法讓開發者服務器更新軟件包。 – user3162553

這有點奇怪，因爲我有一個非常類似的項目設置，它工作得很好。你的意思是捆綁文件沒有被更新？因爲正如我所說的，'webpack-dev-server'構建並完全從內存提供該文件，所以它不會觸及實際的包文件（爲此，您將運行'webpack -w'）。 – robertklep

如果我更改'app/index.js'中的代碼，它不會顯示該結果。如果我添加警報，則頁面刷新並且不會調用警報。如果我運行沒有開發服務器的webpack命令，它就起作用。只有在使用不更新的開發服務器時。 – user3162553

Webpack dev-server - 如何提供更新資產的靜態文件？

回答

相關問題