Question

我正在尝试在Webpack中编写UMD库，该库分为多个可手动加载的文件。这不是我的偏好（根本不是），但这是要求的一部分。

我有CommonsChunkPlugin可以将所有库和文件提取到他们自己的可加载文件中。这是Webpack配置文件：

let plugins = [ new webpack.optimize.CommonsChunkPlugin({
  name: 'gm-components',
  filename: '[name].js',
  minChunks(module, count) {
    let context = module.context;
    let chunk = module.chunks && module.chunks[0];
    return ( chunk && chunk.name == 'components.js' ) ||
     ( context && context.match(/preact|prop-types/i) );
    }
 }),
new webpack.optimize.CommonsChunkPlugin({
  name: 'gm-dates',
  filename: '[name].js',
  chunks: ['dates.js', 'gm-misc.js', 'gm-cart.js'],
  minChunks(module, count) {
    let context = module.context;
    let chunk = module.chunks && module.chunks[0];
    return ( chunk && chunk.name == 'dates.js' ) ||
      ( context && context.match(/supercal|fecha/i) );
    }
})];

module.exports = {
  entry: {
    "components.js":       './src/js/components.js',
    "dates.js":            "./src/js/dates.js",
    "gm-misc.js":          "./src/js/misc.js",
    "gm-cart.js":          "./src/js/cart.js"
  },
  output: {
    path: path.resolve(__dirname, 'assets'),
    filename: '[name]',
    library: 'GMComponents',
    libraryTarget: 'umd',
    umdNamedDefine: true,
  }
};

src中的所有文件都是独立的，但我希望组件具有通用的构造函数。在src/js/components.js我有这段代码：

import { render as domRender} from 'react-dom';
import React, { createElement } from 'react';

export var components = {};
export var render = (ele, name, props, callback) => {
  let klass = components[name];
  let comp = createElement(klass, props || {});
  return domRender(comp, ele, callback);
};

不幸的是，window.GMComponents中的所有内容都是空对象。 CommonsChunkPlugin是否使我无法包含普遍可用的函数？

Webpack 2 UMD库对象为空

0 个答案: