javascript - Webpack 构建时不包含对等依赖项

Question

我正在构建一个 React 库并使用 Webpack 来捆绑它。我很清楚依赖关系和对等依赖关系背后的概念。

在项目中，React 被指定为对等依赖。

"peerDependencies": {
  "react": ">= 16.3.0",
  "react-dom": ">= 16.3.0"
}

这是我的构建脚本

"build": "webpack --config webpack.config.babel.js"

这是我的webpack.config.babel.js

import path from 'path';
import CleanWebpackPlugin from 'clean-webpack-plugin';
const packageJson = require('./package.json');

export default () => ({
  mode: 'production',
  entry: {
    index: path.join(__dirname, 'src/index.js')
  },

  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js',
    library: packageJson.name,
    libraryTarget: 'umd'
  },

  module: {
    rules: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        include: path.join(__dirname, 'src'),
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env', '@babel/preset-react']
            }
          }
        ]
      },
      {
        test: /\.(scss)$/,
        loader: 'style-loader!css-loader!sass-loader'
      }
    ]
  },

  resolve: {
    extensions: ['.js', '.jsx', '.scss']
  },

  plugins: [new CleanWebpackPlugin(['dist/*.*'])],
  optimization: {
    splitChunks: {
      name: 'vendor',
      minChunks: 2
    }
  }
});

每次构建时，React 代码都会包含在捆绑文件中。 我不确定如何在捆绑文件中不包含 React 的情况下捆绑库。

Answer 1

我明白了。

Webpack 有一个名为 externals 的配置。任何指定为外部的内容都不会捆绑在一起。

我所要做的就是将此配置添加到 webpack.config.babel.js

externals: {
  react: 'react',
  reactDOM: 'react-dom'
}

更多信息请点击此处 - webpack externals