Web包只会转换入口点js文件而不是其余的

时间:2017-06-26 01:23:10

标签: javascript reactjs webpack webpack-dev-server

嘿伙计我正在设置我的开发服务器,我希望webpack搜索每个.js文件并使用babel编译它们。按照目前的设置,我的bundle.js只包含我的入口点的内容,但不包括项目目录中的其他js文件。有小费吗 ?

这是我的webpack配置

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"

            }
        ]
    }
}

这是我的文件夹结构

enter image description here

入口点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"));

知道我哪里出错了?

1 个答案:

答案 0 :(得分:1)

正如IsenrichO在评论中暗示的那样,您似乎没有在components文件夹中包含“index.js”。输入点未首先导入的任何文件或入口点导入的任何文件等都不会被转换。

尝试import IndexComponent from "./components/index";,或者索引组件类的名称。