Below is the repo, I used to load a React Application https://github.com/kannanagasamy/react-app-without-cra

Is there a way to change the way, webpack uses ./index.js to some path like './src/index.js'?

I tried using Entry point and pointed it to './src/index.js', but it's not working and webpack is still considering index.js on root folder instead of ./src/index.js

Can somebody help me, where I am going wrong in letting webpack consider index.js inside src folder as base file.

My Current Package.Json

"scripts": {
    "build": "Webpack ."
  },
  "devDependencies": {
    "@babel/cli": "^7.18.10",
    "@babel/core": "^7.19.1",
    "@babel/eslint-parser": "^7.19.1",
    "@babel/plugin-transform-runtime": "^7.19.1",
    "@babel/preset-env": "^7.19.1",
    "@babel/preset-react": "^7.18.6",
    "@babel/runtime": "^7.19.0",
    "babel-loader": "^8.2.5",
    "eslint": "^8.23.1",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-jest": "^27.0.4",
    "path": "^0.12.7",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "path": "^0.12.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "@babel/cli": "^7.17.0"
  }

My Current Webpack.config.file

module.exports={
    mode: "development", 
    entry: "./index.js", 
    output: {
        path: path.resolve(__dirname, "public"),
        filename: "main.js"
    },
    target: "web",
    resolve: {
        extensions: ['.js','.jsx','.json'] 
    },
    module:{
        rules: [
            {
                test: /\.(js|jsx)$/,    //kind of file extension this rule should look for and apply in test
                exclude: /node_modules/, //folder to be excluded
                use:  'babel-loader' //loader which we are going to use
            }
        ]
    }
}

After updating entry point as mentioned below also, I couldn't able to move webpack to drive based on src/index.js

Codes Used

1. entry: path.resolve(__dirname, "src/index"),

2. entry: "src/index",

3. entry: path.resolve(__dirname, "src/index.js"),

4. entry: "src/index.js"

Thanks in Advance..

CodePudding user response：

It seems like the issue around the command build you use which is webpack ., the option . is likely to mention the entry point at current dir ./index.js and then override the one in the configuration file so what you need to move index.js back to src/index.js and resolve the import accordingly again. Finally update the entry as you did ./src/index.js and remove . on as webpack cli.

{
  build: 'webpack' // don't need to take any more extra arg
}