webpack不斷捆綁與多個入口點中的每一個進行反應

我正在學習webpack，並且遇到了麻煩，無法將每個入口點與React.js源代碼結合起來。我一直在關注this writeup的代碼，但無濟於事。這是我的webpack.config.js：webpack不斷捆綁與多個入口點中的每一個進行反應

var webpack = require('webpack'); 
var config = require('./config'); 

module.exports = { 
    entry: { 
     CommentThreadApp: ['./client/CommentThreadApp.jsx'], 
     PostsApp: ['./client/PostsApp.jsx'], 
     SubpyFiller: ['./client/SubpyFiller.jsx'], 
     vendors: ['react'] 
    }, 
    output: { 
     path: './build', 
     publicPath: 'http://localhost:9090/assets/', 
     filename: '[name].bundle.js' 
    }, 
    plugin: [ 
     new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.bundle.js') 
    ], 
    module: { 
     loaders: [ 
      { test: /\.jsx$/, loader: 'jsx-loader' } 
     ] 
    }, 
    devServer: { 
     port: config.webpackServerPort 
    } 
};

這是webpack命令的輸出：

Hash: 289469a6ec0215c9fad9 
Version: webpack 1.8.5 
Time: 1438ms 
        Asset Size Chunks    Chunk Names 
    SubpyFiller.bundle.js 635 kB  0 [emitted] SubpyFiller 
     PostsApp.bundle.js 646 kB  1 [emitted] PostsApp 
CommentThreadApp.bundle.js 658 kB  2 [emitted] CommentThreadApp 
     vendors.bundle.js 633 kB  3 [emitted] vendors 
    [0] multi CommentThreadApp 28 bytes {2} [built] 
    [0] multi PostsApp 28 bytes {1} [built] 
    [0] multi vendors 28 bytes {3} [built] 
    [0] multi SubpyFiller 28 bytes {0} [built] 
    [5] ./config.js 214 bytes {1} [built] 
    [6] ./client/helper-functions.js 1.81 kB {1} {2} [built] 
    + 164 hidden modules

這些文件通常是20KB左右，但結合起來，與該React.js源代碼和各他們變成了620kb。理想情況下，我希望vendors.bundle.js與React和其他模塊一起使用600kb +，並且每個包含30kb的其他軟件包僅包含源代碼和一些雜散需求。我不確定我的webpack配置文件有什麼問題。我的理想輸出：

 SubpyFiller.bundle.js 28 kB  0 [emitted] SubpyFiller 
     PostsApp.bundle.js 28 kB  1 [emitted] PostsApp 
CommentThreadApp.bundle.js 28 kB  2 [emitted] CommentThreadApp 
     vendors.bundle.js 633 kB  3 [emitted] vendors

來源

2015-04-18 Keith Yong

出於好奇，你有同樣的問題，如果你讓你的應用程序入口點串（而不是陣列）？（'賣家'仍然應該是一個數組） –

沒有，從入口點刪除了方括號，沒有任何改變，儘管它沒有給我一個錯誤。 –

這很奇怪......我們絕對使用這個功能來拆分我們的軟件包。我願意與你討論我們的webpack配置，但它很大，有點複雜，如果你願意，我們可以聊天，隨時[聯繫我]（http://brandontilley.com/contact.html）。 –

我也面臨同樣的問題。按照我的說法，最好的方法是從CDN加載react.js。從CDN加載的文件有其自身的優勢（降低服務器負載，緩存等），並保持在webpack.config.js 樣的變化，你可以做外部反應是

在HTML文件中的WebPack包之前包括它文件

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.min.js"></script>

在webpack.config.js文件，添加另一個關鍵出口對象

module.exports = { 
externals: { 
     'react': 'React' 
    } 
}

來源

2015-04-18 21:17:35 khagesh

這有一個缺點，即使在開發設置中，您始終會運行非調試版本，因爲您在此處對縮小版本進行了硬編碼。有很多錯誤會在調試模式下顯示，但會在生產模式下變得沉默...... – srcspider

@srcspider，使用反應的替代url作爲開發者。環境建設。 webpack包也是一樣的。 – khagesh

webpack不斷捆綁與多個入口點中的每一個進行反應

回答

相關問題