反應webpack創建捆綁分離的反應

Question

是否可以配置webpack不編譯反應內捆綁文件？我希望在一個頁面中有更多的反應應用程序，我只想加載反應庫一次以獲得最小尺寸。如何實現這一目標？

Answer 1

在相同的情況下，我創建了包含所有小型「應用程序」+ React的最終捆綁包一次。

// components/index.js (webpacks entry point) 
require("expose?React!react"); 
require("expose?MarketProductListing!./MarketProductListing"); 
require("expose?ProductDetail!./ProductDetail"); 
require("expose?MarketSearch!./MarketSearch"); 

然後，我包括通過<script/>標籤捆綁JS。現在

<script src="js/components.bundle.js"></script> 

，我可以訪問React, MarketProductListing, ...組件JS並使它們需要的地方。

如您所見，我使用了Webpack的expose-loader。

的WebPack配置

var path = require('path'); 
var webpack = require('webpack'); 

const js_dir = path.join(__dirname, 'src'); 

module.exports = { 
    devtool: 'eval', 
    entry: { 
    components: path.join(js_dir, 'components'), 
    }, 
    output: { 
    path: js_dir, 
    filename: '[name].bundle.js' 
    }, 
    plugins: [ 
    new webpack.ProvidePlugin({ 
     'es6-promise': 'es6-promise', 
     'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch' 
    }) 
    ], 
    module: { 
    loaders: [ 
     { test: /\.js$/, loaders: ['babel'] } 
    ] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.json'] 
    } 
};