javascript - webpack 保持捆绑对多个入口点中的每一个使用react

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 中保持 react as external您可以做的示例更改是

在 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'
    }
}