如何在反应中从主捆绑文件中拆分延迟加载的子组件的所有导入语句（使用 webpack 4）

Question

我不确定标题是否合适。但这就是我想要实现的-

我创建了一个 react 可重用组件，它将返回一个特定于环境的标头。当我说环境特定时，我的意思是，在回旋镖环境中，我需要使用一些其他环境不支持的回旋镖特定包。

我为此创建了两个单独的标头组件，一个用于具有一些回旋镖 UI 外壳（其他环境不支持）的回旋镖环境，另一个用于其他环境的组件。

现在，在我的 CustomHeader 组件中，我正在根据环境道具渲染标题。

renderDynamicHeader() {
        let {project, headerText, productName, customHeaderStyle, logoutLink, onSwitcherItemClick, headerPanel, onIconClick, logoLink, headerIcons, navigation, baseURL, features, platform, bmrgCustomIcons} = this.props;
        let {environment} = this.props;
        if(environment !== 'boomerang' && environment !== 'production' && environment !== undefined) {
            return <NonBoomerangHeader environment={environment} headertxt={headerText} selectedProject={project} productName={productName} customHeaderStyle={customHeaderStyle} logoutLink={logoutLink} onSwitcherItemClick={onSwitcherItemClick} onSwitcherItemClick={onSwitcherItemClick} headerPanel={headerPanel} onIconClick={onIconClick} logoLink={logoLink} headerIcons={headerIcons}/>
        } else {
            const BoomerangHeader = lazy(() => import(/* webpackChunkName: "BoomerangHeader" */ "../BoomerangHeader/index"));
            return (
                <Suspense fallback={<NonBoomerangHeader environment={environment} headertxt={headerText} selectedProject={project} productName={productName} customHeaderStyle={customHeaderStyle} logoutLink={logoutLink} onSwitcherItemClick={onSwitcherItemClick} onSwitcherItemClick={onSwitcherItemClick} headerPanel={headerPanel} onIconClick={onIconClick} logoLink={logoLink} headerIcons={headerIcons}/>}>
                  <BoomerangHeader environment={environment} headertxt={headerText} selectedProject={project} productName={productName} customHeaderStyle={customHeaderStyle} logoutLink={logoutLink} navigation={navigation ? navigation : undefined} baseURL={baseURL? baseURL : undefined} features={features? features : undefined} platform={platform ? platform : undefined} bmrgCustomIcons={bmrgCustomIcons} onIconClick={onIconClick}/>
                </Suspense>
            );
        }
    }

我的 webpack.config.js 文件中有这个配置：

const path = require('path')
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin')
const nodeExternals = require('webpack-node-externals');
const webpack = require('webpack');

module.exports = {
  entry: './src/index.js',
  externals: [nodeExternals()],
  output: {
    filename: 'index.js',
    publicPath: 'dist/',
    path: path.resolve(__dirname, 'dist'),
    library: '',
    libraryTarget: 'commonjs',
    chunkFilename: '[name].js'
  },
  plugins: [new CleanWebpackPlugin()],
  module: {
    rules: [{
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', {
          loader: 'sass-loader',
          options: {
            implementation: require('sass'),
          },
        }],
        include: path.resolve(__dirname, './src')
      }
    ]
  }
}

但是当我进行构建时，回旋镖头组件的内部依赖项被附加/捆绑在主 index.js 文件中

这是我的 BoomerangHeader.js 文件中的导入语句

import React, {Component} from 'react'
import {UIShell} from '@boomerang/carbon-addons-boomerang-react';
import axios from 'axios';
import './boomerangHeader.scss';

我可以将其视为 dist 文件夹的 index.js 文件中的导出语句

(r=[{key:"renderDynamicHeader",value:function(){console.log("inside renderDynamicHeader library");var t=this.props,e=t.project,r=t.headerText,a=t.productName,l=t.customHeaderStyle,b=t.logoutLink,s=t.onSwitcherItemClick,x=t.headerPanel,d=t.onIconClick,c=t.logoLink,p=t.headerIcons,f=t.navigation,g=t.baseURL,h=t.features,_=t.platform,u=t.bmrgCustomIcons,w=this.props.environment;if("boomerang"!==w&&"production"!==w&&void 0!==w)return console.log("inside non boomerang if block"),n.a.createElement(m,{environment:w,headertxt:r,selectedProject:e,productName:a,customHeaderStyle:l,logoutLink:b,onSwitcherItemClick:s,onSwitcherItemClick:s,headerPanel:x,onIconClick:d,logoLink:c,headerIcons:p});console.log("trying to lazy load boomerang file");var v=Object(i.lazy)((function(){return o.e(0).then(o.bind(null,9))}));return console.log("successfully imported boomerang file"),console.log(v),n.a.createElement(i.Suspense,{fallback:n.a.createElement(m,{environment:w,headertxt:r,selectedProject:e,productName:a,customHeaderStyle:l,logoutLink:b,onSwitcherItemClick:s,onSwitcherItemClick:s,headerPanel:x,onIconClick:d,logoLink:c,headerIcons:p})},n.a.createElement(v,{environment:w,headertxt:r,selectedProject:e,productName:a,customHeaderStyle:l,logoutLink:b,navigation:f||void 0,baseURL:g||void 0,features:h||void 0,platform:_||void 0,bmrgCustomIcons:u,onIconClick:d}))}},{key:"render",value:function(){var t=this.renderDynamicHeader();return n.a.createElement("div",null,t)}}])&&_(e.prototype,r),a&&_(e,a),b}(i.Component)},function(t,e){t.exports=require("@boomerang/carbon-addons-boomerang-react")},function(t,e){t.exports=require("axios")}]));

我希望将此 require 语句单独保存在不同的文件中。由于延迟加载/代码拆分，boomerangHeader 块也被单独创建，但是这个 require 语句没有被拆分到不同的文件中。

我尝试使用 webpack 的 splitChunks 插件，但这也没有将它与主包分开。

有什么方法可以让我们从这个包中删除这个 require 语句，并将它单独保存在其他一些文件中，这样我就可以在非 Boomerang 环境中工作时忽略该文件。或者有什么方法可以忽略客户端应用程序中的“找不到模块”错误？

如果有人能在这方面帮助我，那就太好了。

Answer 1

对于如何将导入语句从 webpack 包拆分到单独的文件中，我找不到任何合适的解决方案，因为我猜这就是 webpack 的工作方式。 我想拆分它，以便我可以根据条件忽略该文件。

但似乎在客户端应用程序中忽略包本身解决了这个问题。

if (isnotBoomerang) {
    var newClientPlugins = [];
    newClientPlugins.push(
      new webpack.IgnorePlugin(/@boomerang/)
    );
    newClientPlugins.push(
      new HtmlWebPackPlugin({
        template: APP_DIR + '/client/index.html',
      })
    );
    client['plugins'] = newClientPlugins;
  }