React Webpack创建具有单独的React的包

Question

有可能配置webpack不编译束文件内的反应吗？ 我希望在一页中有更多的React应用程序，并且我只想加载一次React库以获取最小的大小。 怎么做到这一点？

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>

现在，我可以访问JS中的React, MarketProductListing, ...组件，并在需要的地方渲染它们。

如您所见，我对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']
  }
};