Question

我有两个webpack 2个项目

第一个，我们称之为lib1是一个可重用的React组件库。在webpack配置中，它将导出为名为lib1的库。该项目将react和react-dom列为外部依赖项。
第二个，我们称之为proj1是一个使用lib1的应用。因为lib1是在cdn上提供的，所以它被列为外部依赖项。该项目还取决于react和react-dom。使用CommonsChunkPlugin我生成vendor.js，其中包含react和react-dom（以及最终的其他依赖关系）。

当我在浏览器中运行proj1时，lib1中的代码会失败，因为它无法找到react。库按以下顺序加载：

<script src="dist/vendor.js"></script>
<script src="http://cdn.com/lib1/lib1.js"></script>
<script src="dist/bundle.js"></script>

我想问题是我的react文件未导出react-dom和vendor.js。

我尝试使用像这样的库选项（int proj1）：

 library: "[name]", 
 libraryTarget: "umd"

但它创建的window.vendor不是window.React和window.ReactDOM。

我该怎么做？

lib1 config

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, "dist"), // string
    filename: "bundle.js",
    publicPath: "/dist/",
    library: "lib1",
    libraryTarget: "umd",
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: path.resolve(__dirname, "node_modules"),
    }]
  },
  externals: ["react", "react-dom"],
};

proj1 config

var webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: {
    bundle : './src/index.js',
    vendor : ['react', 'react-dom']
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
    publicPath: "/dist/",
    library: "[name]",
    libraryTarget: "umd",
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor'
    })
  ],
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      exclude:  path.resolve(__dirname, "node_modules"),
    }]
  },
  externals: ["lib1"],
  devtool: "source-map"
};

如何在vendor.js（CommonsChunkPlugin）中导出捆绑的库？

0 个答案: