代码之家  ›  专栏  ›  技术社区  ›  Dinesh Pandiyan

要生成的Webpack,不包括对等依赖项

  •  2
  • Dinesh Pandiyan  · 技术社区  · 6 年前

    我正在构建一个React库,并使用Webpack将其捆绑在一起。我很清楚依赖和对等依赖背后的概念。

    在这个项目中, React 被指定为对等依赖项。

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

    这是我的 build 脚本

    "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
        }
      }
    });
    

    每次我建造的时候, 反应 代码包含在捆绑文件中。 我不确定如何捆绑图书馆而不包括 反应 在捆绑文件中。

    1 回复  |  直到 6 年前
        1
  •  3
  •   Dinesh Pandiyan    6 年前

    我知道了。

    Webpack的配置名为 externals . 任何指定为外部的东西都不会捆绑在一起。

    我只需要把这个配置添加到 webpack.config.babel.js

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

    此处提供更多信息- webpack externals