當目標節點爲

時，Webpack忽略代碼拆分我有一個使用react-router來渲染React視圖服務器端的節點應用程序。我的問題是，我使用require.ensure在客戶端執行代碼拆分，但不希望在編譯我的服務器端代碼時發生代碼拆分。這是我的WebPack配置：當目標節點爲

{ 
    entry: path.join(__dirname, '../server/app.js'), 
    target: 'node', 
    output: { 
    path: './', 
    filename: 'server.js' 
    }, 
    module: { 
    loaders: [ 
     { test: /\.js$/, loader: 'babel', exclude: /node_modules/ }, 
     { test: /\.hbs$/, loader: 'handlebars-loader', include: /client/ } 
    ] 
    }, 
    externals: nodeModules 
}

當我運行它，我得到server.js，1.server.js，2.server.js，等我寧願只是有一個server.js文件。

在每個路由文件我的頂部：

if (typeof require.ensure !== 'function') require.ensure = (d, c) => c(require);

，當我在開發中使用require('babel/register')其中一期工程，但我寧願有生產編譯的文件。

來源

2016-02-12 Brad

我已經解決了這個需求周圍的條件。如果它是瀏覽器版本，require.ensure，如果它是服務器版本，只需要。我用的是DefinePlugin來定義「常量」變量爲每個製作環境，所以它看起來像

if (BUILD_BROWSER) { 
    require.ensure('foo.js', function() { ... }); 
} else { 
    require('foo.js'); 
    ... 
}

的WebPack的靜態分析僅是足夠聰明，明白布爾值，所以做這樣的事情if (BUILD_TARGET === 'browser')不會工作;解析器將不會遵循邏輯並將處理這兩個要求。

如果您使用的是Uglify插件，它會去掉不需要的條件邏輯，這樣您就不會膨脹您的生產版本。

來源

2016-02-12 21:45:25

謝謝！像魅力一樣工作。 – Brad

但是你有React的問題，校驗和在服務器端呈現的HTML和客戶端上生成的HTML之間不匹配，從而失去了服務器端呈現的許多「優點」。即服務器和客戶端都呈現不同的HTML。另外，我甚至不知道如何在客戶端上有條件地從嵌入在DOM中的不同js包（您只爲給定路徑呈現）加載，而現在不觸發主包來包含相同的文件。看起來它只能通過爲每條路線創建入口點，而不是'確保'。 –

當目標節點爲

回答

相關問題