webpack-dev-server 熱重載不工作

Question

我的文件結構是：

dist
  css
    style.css
  index.html
  js
    bundle.js
src
  css
    style.css
  index.html
  js
    main.js
node_modules
webpack.config.js
package.json

我的 webpack.config.js 看起來像：

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: __dirname,
        filename: './dist/js/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue'
            }
        ]
    }
};

我跑：

webpack-dev-server --content-base dist --hot

它建立起來並且看起來像是在工作。 localhost:8080 顯示了預期的結果，但熱重載不起作用。 當我更改文件時，我可以在終端中看到重建正在進行，但瀏覽器中沒有任何反應。 我在配置中遺漏了什么嗎？

Answer 1

對我有用的是在我的index.html文件中編寫<script src="bundle.js">而不是<script src="dist/bundle.js"> 。

// index.html
<script src="bundle.js"></script>      // works
<script src="dist/bundle.js"></script> // doesn't work!

如果您只是使用webpack構建它，那么將dist/bundle.js為輸出文件非常有效。 但是當使用webpack-dev-server時，文件系統中已經存在的靜態文件會繼續被提供，而不是最新的熱替換。 當webpack-dev-server在 html 文件中看到dist/bundle.js並且沒有熱替換它時，它似乎感到困惑，即使webpack.config.js配置為該路徑。

Answer 2

使用webpack-dev-server時，它會在內部構建所有文件，並且不會將它們吐出到您的輸出路徑中。 單獨運行webpack ，沒有開發服務器，實際編譯到磁盤。 開發服務器在內存中完成所有工作，這大大加快了重新編譯的速度。

要解決熱重載問題，請將內容庫設置為源目錄並啟用內聯模式

像這樣：

webpack-dev-server --content-base src --hot --inline

Answer 3

此頁面上的所有選項都不適合我。 將 devServer 部分更改為：

devServer: {
    port: 8080,
    contentBase: ['./src', './public'], // both src and output dirs
    inline: true,
    hot: true
},

有效。

Answer 4

100% 工作解決方案

您只需遵循 3 個步驟，即可按預期進行熱重載

1. 在 webpack 配置的“輸出”屬性中包含“publicPath”鍵。 “publicPath”應該包含你的 bundle.js 文件的路徑，以便開發服務器知道你的 bundle.js 文件是否有任何變化，它會重新加載你的應用程序。

您的配置應如下所示 -

 output: { path: __dirname, publicPath:"/dist/js/", filename: './dist/js/bundle.js' }

2. 在配置文件中添加“devServer”選項 -

 devServer:{ contentBase:"/src/", inline:true, stats:"errors-only" }

請注意， contentBase應該指向您放置包含腳本標簽的 index.html 文件的路徑，在您的情況下，它將是“/src/”

3. 最后，您必須確保 index.html 中的 'script' 標記的 'src' 屬性指向從“ http://localhost:port ”開始的 bundle.js，如下所示 -

<script src="http://localhost:portnumber + value in publicPath + bundle.js"></script>

在你的情況下，它看起來像這樣 -

<script src="http://localhost:8080/js/dist/bundle.js" type="text/javascript"></script>

最后請記住webpack-dev-server doesn't compile your js file or make build or watch on your js文件它會在內存中執行所有操作以查看您的 js 文件您必須在單獨的窗口中運行webpack --watch

Answer 5

--inline --hot 對我來說不是問題

如果你使用 redux 可以試試這個。

由於某種隨機原因redux-devtools不允許我進行熱重載。 嘗試從根組件和redux compose config 中刪除它。

注意：在您的商店配置中使用帶有此配置的 redux devtool 瀏覽器擴展： window.devToolsExtension ? window.devToolsExtension() : f => f window.devToolsExtension ? window.devToolsExtension() : f => f

另外，必須閱讀： https ://medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96#.ejpsmve8f

或嘗試熱重載 3：示例： https ://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915

Answer 6

唯一對我有用的是在“ devServer ”的配置中應用“hotOnly”（在“webpack.config.js”上），如下所示：

devServer: {
    hotOnly: true,
},

重新加載“Webpack 開發服務器”后，“熱重載”至少在保存 CSS 或 JS 文件中的任何更改后有效。

Answer 7

對於 Webpack ^5.72.1

這對我有用，

 devServer: {
    port: 3000,
    hot: false,
    liveReload: true,
  },

注意：liveReload 將在文件保存時重新加載整個應用程序，但它會丟失應用程序狀態。 熱重載會保留狀態。 但是 liveReload 似乎為我解決了保存后 css/html 未在瀏覽器上加載的問題，而無需刷新瀏覽器。

Answer 8

Webpack 熱重載也停止了對我的工作。 我的解決方案是刪除node_modules文件夾並全新安裝所有依賴項。 只需在終端中打開node_modules的父文件夾並運行npm install

Answer 9

所有受苦的人：不要忘記公共路徑前的斜杠： publicPath:'/assets/scripts/'不是publicPath:'assets/scripts/'因為路徑字符串中的 1 個正斜杠而丟失了三天

Answer 10

嘗試這個：

在您的package.json文件中，刪除 scripts 對象下包含"test" "echo \"Error: no test specified\" && exit 1"的行，並將其替換為：

...
"scripts": {
    "start": "webpack-dev-server --hot"
  },

...

然后重新啟動您的項目，只需使用npm start 。

當我遇到這個問題時，這對我有用。

編輯：你能分享你的package.json文件嗎？

嘗試將其添加到 webpack.config.js 以及

devServer: {
  inline: true,
  port: 3000,
  hot: true
},

Answer 11

檢查您的控制台日志是否有以下錯誤，然后將 cors 添加到您的 webpack 開發服務器文件

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin react hot reload

理想情況下，在您的開發服務器 js 中添加以下條目

headers: { "Access-Control-Allow-Origin": "*" },

Answer 12

我增加了可以觀看的文件更改的最大數量，它對我有用。 我想我的問題是文件太多。

echo fs.inotify.max_user_watches=1999999 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

資源

Answer 13

您可以嘗試將其添加到您的配置中：

module.exports = {
...
  devServer: {
    contentBase: './dist/', // Since your index.html is in the "dist" dir
    open: true,             // Automatically open the browser
    hot: true,              // Automatically refresh the page whenever bundle.js changes
                            // (You will have to refresh manually if other files change)
  },
...
};

然后運行（無選項）：
webpack-dev-server

Answer 14

通過上述設置，在使用webpack-dev-server進行靜態頁面構建時，我將 bundle js 或任何配置為輸出的 js 文件添加到 html 頁面。 這樣，我在進行任何更改后都會刷新我的靜態頁面。

Answer 15

對於 webpack 版本 5，module.loaders 現在是 module.rules。 對於預設，將查詢更改為選項。

Answer 16

確保在開發模式下您沒有使用將 css 提取到文件中的插件，例如 MiniCssExtractPlugin。 它把事情搞砸了。