Question

是否可以将webpack配置为不在bundle文件中编译反应？我想在一个页面中有更多的反应应用程序，我想只加载一次反应库以获得最小的大小。怎么做到这一点？

Answer 1

在同样的情况下，我创建了所有小型应用程序＆＃34; + 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, ...组件并在需要的地方进行渲染。

如您所见，我将expose-loader用于Webpack。

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']
  }
};

React webpack创建具有分离反应的bundle

1 个答案: