javascript - Webpack：如何在某些输出文件中保持导入？

Question

假设我在 webpack 中有以下入口文件：

/* Path: src/MyComponent.jsx */

import React from 'react';
// other subcomponent imports
// MyComponent definition
...
export default MyComponent;

/* Path: src/index.js */

import React from 'react';
import { render } from 'react-dom';
import MyComponent from './MyComponent';
// render MyComponent
// other logic

使用我当前的 webpack 配置：

entry: {
  'my-component': path.join(__dirname, 'src/MyComponent.jsx'),
  'index': path.join(__dirname, 'src/index.js'),
},
output: {
  filename: '[name].bundle.js',
  path: path.join(__dirname, 'dist'),
},

我得到两个输出文件：

1. my-component.bundle.js，其中包含MyComponent+ 其所有子组件 + 供应商代码
2. index.bundle.js，其中包含MyComponent+ 其所有子组件 +index.js相关逻辑 + 供应商代码

但是，我想要以下内容：

1. my-component.bundle.js，其中包含MyComponent+ 其所有子组件 + 供应商代码
2. index.bundle.js，其中包含导入my-component.bundle.js（即不捆绑在一起）+index.js相关逻辑+供应商代码

我怎样才能做到这一点？

标签： javascriptwebpack