Question

我正在学习webpack，而我却无法将这些入口点与React.js源代码结合起来。我一直在关注this writeup的代码，但无济于事。这是我的webpack.config.js：

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

Answer 1

我也面临同样的问题。按照我的说法，最好的方法是从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'
    }
}

webpack保持捆绑与多个入口点中的每一个进行反应

1 个答案: