Web-pack only transpiling the entry point js file but not the rest

Question

Hey guys I'm setting my development server and I would like webpack to search through each .js file and transpiled them using babel. As is currently set up, my bundle.js only includes the content of my entry point but not other js file in the project directory. any tips ?

this is my webpack config

module.exports = {

    entry: './app/src/index.js',
    output:{
        path: __dirname,
        publicPath:'/',
        filename: 'bundle.js'
    },
    devServer:{
        inline: true,
        contentBase:'./',
        port: 61116

    },
    module: {
        loaders: [
            {
                test:  /\.js$/,
                exclude:/(node_modules)/,
                loader: 'babel-loader',
                query: {
                    presets: ["es2015", "react", "stage-1"]
                } 
            },
            {
                test: /\.css$/,
                loader:"style-loader!css-loader"
            },
             {
                test: /\.html$/,
                loader:"html-loader"

            }
        ]
    }
}

and this is my folder structure

Entry Point index.js

import React from 'react' ;
import ReactDOM from 'react-dom';

console.log("This ran");
const  App = () =>{
    return (<p>This is a new app</p>);
}


ReactDOM.render(<App />, document.querySelector(".react-container"));

Any idea where I'm going wrong ?

Answer 1

As IsenrichO implies in the comments, you don't seem to be including "index.js" from your components folder. Any file that is not first imported by the entry point, or any file the entry point imports, and so on, will not be transpiled.

Try import IndexComponent from "./components/index"; , or whatever the name of your index component class is.