Webpack how to ignore the imported files

Question

Let's say I have the files Header.jsx, Footer.jsx, Home.jsx and the App.jsx with the following contents:

// Header.jsx
import React from 'react';
export default function() {
    return <h1>This is a header</h1>;
}

// Footer.jsx
import React from 'react';
export default function() {
    return <h1>This is a footer</h1>;
}

// Home.jsx
import React from 'react';
import Header from 'Header.jsx;
import Footer from 'Footer.jsx;
export default function() {
    return (
        <div>
          <Header />
          <h1>This is home</h1>
          <Footer />
        </div>
    );
}

// App.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Home from 'Home.jsx';

const reactRoot = document.getElementById('root');
ReactDOM.render(reactRoot, <Home />);

Now, when I use Webpack and App.jsx as an entry point, I'll get all the files that's been referenced in the final bundle.

So, I'll be including the app bundle like so and that'll be all.

<script src="app.23998992429929.js" />

But, I have the need to import it in the following way:

<script src="Header.jsx" />
<script src="Footer.jsx" />
<script src="Home.jsx" />
<script src="App.jsx />

The entry points are all sorted and I am able to get the above structure. But App.jsx still has all the code that's being imported from <script /> tags which I do not want.

The above is a dumbed down example. The reason I am doing this is to get coverage report of individual components after a RSpec feature test.

So is there a way to exclude the import ... from '...'; from the output?

I think externals maybe of help here but I don't know how to do so when the modules are files.

Answer 1

Yes. You can use external configurations:

module.exports = {
  //...
  externals: {
    Header: 'Header',
    Footer: 'Footer',
    Home: 'Home',
    App: 'App'
  }
};

The externals configuration option provides a way of excluding dependencies from the output bundles. Instead, the created bundle relies on that dependency to be present in the consumer's (any end-user application) environment.

-From docs