如何配置webpack的自動代碼拆分以相對於構建輸出文件夾加載模塊？

我正在使用Webpack 2的自動代碼分割將我的應用程序分成多個輸出文件。我webpack.config.js文件是：如何配置webpack的自動代碼拆分以相對於構建輸出文件夾加載模塊？

const path = require('path'); 

module.exports = { 
    entry: './app.js', 
    output: { 
    filename: '[name].js', 
    path: path.join(__dirname, 'build'), 
    } 
}

此建立正確我app.js文件到文件夾build與其他模塊文件一起。構建目錄有以下文件：

main.js 
0.js

我的問題是，當main.js請求0.js，它在我的應用程序的根這樣做，而不是相對於當前位置。因此，它應該加載localhost:8000/build/0.js時基本上試圖加載localhost:8000/0.js。我怎樣才能配置我的項目，以便我的項目正確加載拆分模塊相對於我的主入口點的路徑？

來源

2017-02-12 dstaley

默認的WebPack將從根目錄中加載的模塊。您可以通過在入口點聲明__webpack_public_path__變量來配置Webpack將加載的文件夾。因此，對於這種情況，你可以使用：然後

__webpack_public_path__ = 'build/';

的WebPack將從build文件夾中加載的模塊。但是，這仍然是相對於根。爲了告訴的WebPack加載相對於入口點腳本，可以動態配置__webpack_public_path__您的入口點的腳本與目錄：

const scriptURL = document.currentScript.src; 
__webpack_public_path__ = scriptURL.slice(0, scriptURL.lastIndexOf('/') + 1);

document.currentScript是well supported in evergreen browsers，但在Internet Explorer中不支持。

來源

2017-02-12 17:47:27 dstaley

這很好。對於替代document.currentScript的IE，我建議使用'document.querySelector（'script [src $ =「nameofmyapp.js」]'）。src' – undefinederror

UPDATE：

代碼分裂作品大都如果你有多個入口點，在這種情況下，你可以根據需要加載代碼的一部分。（例如在requestidlecallback或setTimeout中，並不重要）。

但通常用於路由時，如果您不想加載/上的設置邏輯，但希望將其加載到/settings。

所以，你可以添加類似

// goes to `/settings` 
button.addEventListener('click',() => { 
    require.ensure([],() => { 
    require('./settings') 
    }) 
})

你檢查require.ensure()？

webpack靜態解析代碼中的require.ensure（），同時構建並將模塊添加到單獨的塊中。這個新塊由webpack通過jsonp按需加載。

https://webpack.js.org/guides/code-splitting-require/#require-ensure-

來源

2017-02-12 17:08:49 havenchyk

代碼拆分工作正常，只是webpack認爲模塊位於根目錄而不是相對於主入口點。 – dstaley

@dstaley只是要求它不在根目錄中，而是在必要的塊中 – havenchyk

@dstaley更新了答案 – havenchyk

如何配置webpack的自動代碼拆分以相對於構建輸出文件夾加載模塊？

回答

相關問題