通過Django模板更新Webpack熱模塊

我試圖爲通過Django模板系統提供的捆綁前端靜態資源設置熱模塊替換，如果這甚至可能的話。目前，我正在通過livereload刷新頁面，只要編譯資源發生變化，但編譯時間會變得更長，並且任何CSS更改都會觸發整頁重新加載。通過Django模板更新Webpack熱模塊

以下是Django中模板文件的示例。

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 

    <!-- Header Links --> 
    </head> 
    <body> 
    <div id="app"></div> 

    <script type="text/javascript"> 
     window.CONFIG = { 
     /** Injected application configuration from Django. */ 
     }; 
    </script> 

    <!-- Webpack bundle url --> 
    <script src="{{ bundle_url }}"></script> 

    </body> 
</html>

我已經能夠通過的WebPack開發服務器來服務資產，並通過模板變量注入束網址http://localhost:3000/bundle.js，這樣我就可以看到在視圖中的應用。

的WebPack配置

'use strict'; 

const webpack = require('webpack'); 
const CONFIG = require('./config'); 

/** 
* Webpack configuration for a development environment. 
* @type {Object} 
*/ 
module.exports = { 
    devtool: 'cheap-module-eval-source-map', 
    entry: [ 
    require.resolve('core-js/shim'), 
    CONFIG.PATHS.ENTRY, 
    ], 
    output: { 
    path: CONFIG.PATHS.BUILD, 
    filename: CONFIG.OUTPUT_FILENAME, 
    }, 
    module: { 
    rules: CONFIG.SHARED_RULES.concat([{ 
     test: /\.css$/, 
     use: ['style-loader', 'css-loader'], 
    }, { 
     test: /\.scss$/, 
     use: ['style-loader', 'css-loader', 'sass-loader'] 
    }]), 
    }, 
    resolve: CONFIG.WEBPACK_RESOLVE, 
    plugins: [ 
    new webpack.HotModuleReplacementPlugin(), 
    ], 
};

啓動腳本：

'use strict'; 

// Crashes the script on unhandled rejections instead of silently ignoring. 
process.on('unhandledRejection', (error) => { throw error; }); 

process.env.NODE_ENV = 'development'; 

// Vendor 
const webpack = require('webpack'); 
const WebpackDevServer = require('webpack-dev-server'); 
const chalk = require('chalk'); 

// Local 
const WEBPACK_CONFIG = require('../config/webpack.config.dev'); 
const CONFIG = require('../config/config'); 

const PORT = parseInt(process.env.PORT, 10) || CONFIG.DEFAULT_PORT; 
const HOST = process.env.HOST || CONFIG.DEFAULT_HOST; 
const URL = `http://${HOST}:${PORT}/`; 

const compiler = webpack(WEBPACK_CONFIG); 
const server = new WebpackDevServer(compiler, { 
    compress: true, 
    hot: true, 
    host: HOST, 
    stats: 'minimal', 
}); 

server.listen(PORT, HOST, (error) => { 
    if (error) { return console.log(chalk.red(error)); } 

    console.log(chalk.cyan(`Starting the development server at ${URL}...`)); 


    ['SIGINT', 'SIGTERM'].forEach((signal) => { 
    process.on(signal,() => { 
     server.close(); 
     process.exit(); 
    }); 
    }); 
});

我不確定開發服務器如何觸發熱重裝。我的印象是這個軟件包包含一個連接到dev服務器上的Websocket連接的腳本，並且連接會觸發腳本下載並顯示新的資產。雖然這可能並非如此，但我無法找到任何有關如何傳送熱重新加載的信息。我只發現客戶端收到更新後熱重新加載的工作原理。

來源

2017-08-09 IbrewU

經過大量的搜索，我終於找到了解決我的問題。我發現information about how to integrate webpack-dev-server with an existing server in the old webpack docs，讓我擺脫了整個構建腳本，並在package.json一個腳本，僅使用的WebPack-dev的服務器不帶任何標誌都換成它：

"scripts": { 
    "start": "cross-env NODE_ENV=development webpack-dev-server", 
    // Scripts... 
}

這會自動注入的熱模塊替換代碼放入我的包中，並在更改時刷新我的頁面。這比我以前的livereload服務器快得多。該軟件包在我的應用程序模板中通過url http:localhost:8080/bundle.js引用，而不是通過本地路徑引用。因爲捆綁包被保存在內存中，所以本地路徑無法工作。

該網址還解釋瞭如何獲得--inline --hot功能工作，但我從來沒有能夠得到它在我的設置工作。

如果您需要使用本地路徑而不是通過url引用包，那麼您將不得不依賴於使用webpack的watch模式並手動刷新頁面或依賴Django插件。我找到的解決方案對我來說很好，因爲它反映了我們的生產環境。我們的Django部署通過我們管理的CDN引用前端資產。如果您必須使用Django代碼部署前端資產，它可能無法很好地工作，但是如果您創建了在兩個不同的應用程序模板之間切換的Django設置，則可能會發生這種情況：一種用於使用URL拉入腳本的開發，一個用於引用STATICFILES_DIRS中的文件的生產。

來源

2017-08-10 16:41:59 IbrewU

這個問題我不認爲是Webpack的錯。我注意到當Django服務我的React文件時會出現這些速度問題。當你使用Django的時候，你的文件由Django服務器提供，而且與webpack-dev服務器相比，它本質上很慢。 webpack開發服務器與Django之間的整個通信過程可能需要時間，因此必須讓Django服務器觸發更改，然後再次重新提供靜態文件。

解決這個問題的方法之一是將React前端代碼與後端代碼隔離開來，讓您的React使用您的Django的REST API。它運行非常流暢，並減少了服務器上的大量負載。

來源

2017-08-10 04:09:14 kotAPI

我已經這麼做了。前端和後端項目位於兩個完全獨立的存儲庫中，前端資源通過webpack-dev-server中的URL（http：// localhost：3000/bundle.js）而不是本地文件路徑（path/to/bundle.js）在應用程序模板中。我試圖弄清楚的是，如果通過webpack-dev-server不提供應用程序的HTML模板，我可以通過該URL利用webpack-dev-server的熱重載能力。 – IbrewU

通過Django模板更新Webpack熱模塊

回答

相關問題