更智能的webpack捆綁反應和快遞

-1

我有一個反應應用程序，它運行在一個快速服務器上，並與webpack捆綁在一起。我的問題是，每當我重新啓動服務器時，就像我正在對其進行更改時一樣，即使我不對前端進行任何更改，也需要重新構建前端包。更智能的webpack捆綁反應和快遞

只需重新加載服務器部分並保留當前前端包就可以了，只需要進行不涉及前端包的服務器/ api更改即可。

下面是在開發環境中運行的代碼：

const compiler = webpack(webpackConfig) 
    const middleware = webpackMiddleware(compiler, { 
    publicPath: webpackConfig.output.publicPath, 
    contentBase: 'src', 
    stats: { 
     colors: true, 
     hash: false, 
     timings: true, 
     chunks: false, 
     chunkModules: false, 
     modules: false 
    } 
    }) 

    app.use(middleware) 
    app.use(webpackHotMiddleware(compiler)) 
    app.get('*', (req, res) => { 
    res.write(middleware.fileSystem.readFileSync(path.join(__dirname, 'build/app.html'))) 
    res.end() 
    })

有沒有一種更聰明的辦法做到這一點？是否有可能將當前的前端軟件包保留在內存中並重新加載服務器？或者我可以檢測是否需要更新軟件包並在不需要更新時跳過該過程？

歡迎任何提示，建議和建議！讓我知道你是否需要其他信息。謝謝！

來源

2017-11-25 Shan Robertson

Chokidar解決方案

如果使用的WebPack-dev的工具，對於觀看修改一個偉大的圖書館是chokidar

Chokidar確實仍然依賴Node.js的核心FS模塊上，但使用時 fs.watch和fs.watchFile用於觀看，它規範了它接收的事件，通常通過獲取文件統計信息和/或目錄內容來檢查事實。

以下是使用chokidar僅觀察目標文件夾的一個小例子。只要定位一個特定的文件夾，就可以保持前端完好無損。我沒有爲你的具體用例嘗試過，但乍看起來這似乎可能適合你的需求。

var production = process.env.NODE_ENV === 'production' 
if(!production) { 
    var chokidar = require('chokidar') 
    var watcher = chokidar.watch('./targetfolder') 
    watcher.on('ready', function() { 
    watcher.on('all', function() { 
     console.log("Clearing /targetfolder/ module cache from server") 
     Object.keys(require.cache).forEach(function(id) { 
     if (/[\/\\]targetfolder[\/\\]/.test(id)) delete require.cache[id] 
     }) 
    }) 
    }) 
}

有Github上一個很好的例子，被稱爲Ultimate Hot Reloading Example

注：本的WebPack-DEV-服務器不將文件寫入到磁盤，它提供從存儲結果低谷的Express實例。但是webpack - watch會將文件寫入磁盤。

標誌的解決方案

可以使用的WebPack的--watch標誌。

在您的package.json中，啓動服務器的腳本塊（或運行webpack的腳本塊）添加此webpack --progress --colors --watch。

見Webpack documentation，它說：

我們不希望每次更改後手動重新編譯......

當使用計時模式的WebPack安裝文件觀察到的所有文件，這是在用編譯過程。如果檢測到任何更改，它將再次運行編譯。啓用緩存時，webpack會將每個模塊保存在內存中，並在未更改的情況下重用。

例中的package.json：

"scripts": { 
    "dev": "webpack --progress --colors --watch" 
}

來源

2017-11-25 20:29:09 Sbe88

雖然webpack在server.js文件中運行，但'webpack-dev-middleware'模塊給出了一個'lazy'選項，它似乎反映了你的報價所說的內容，但我並不認爲這解決了問題，因爲停止服務器會從內存中刪除構建不是嗎？ –

@ShanRobertson，我編輯了我的回覆。如果您正在進行公開回購，請分享鏈接，以便我可以對其進行測試......'lazy：true;'表示無需觀看，但對每個請求重新編譯'watchOptions'只有在懶惰設置爲false時纔有效。 webpack-dev-server不會將文件寫入磁盤，它通過Express實例從內存中提供結果。但是webpack - watch不會將文件寫入磁盤，因此您可以保持構建。 – Sbe88

我有一個SpringBoot的應用程序，在那裏我能迅速重建我的包，但當時不一定會使得服務器往裏實際這個問題文件夾並實時查找。因此，真正需要做的是有一種方法來配置服務器，以便始終在bundle.js文件的本地文件夾中查找，而不是將其從WAR/JAR或其通常從其中拉出的任何位置。這不是「webpack問題」。這是一個如何讓服務器直接從文件夾中的bundle.js讀取的問題。我會給你Spring的做法，但這不是你的架構。

來源

2017-11-25 23:06:31

更智能的webpack捆綁反應和快遞

回答

相關問題