未找到Entry Module中的错误 - 在Webpack配置文件中

Question

I am trying to setup webpack for ReactJs. I am clueless what is wrong with my Webpack Config File which gives me

ERROR in Entry module not found: Error: Can't resolve './src' in 'D:\\wd\\javascript\\Projects\\reactjs-basics

CODE IS HERE - Two files "Webpack.config.js " and "Package.json"

Webpack.config.js code is :

var webpack = require('webpack');
var path = require('path');

var DIST_DIR = path.resolve(__dirname,'dist');
var SRC_DIR = path.resolve(__dirname,'src');

var config = {
    entry: SRC_DIR+'/app/index.js',
    output:{
        path:DIST_DIR+'/app',
        filename:'bundle.js',
        publicPath:'/app/'
    },
    module:{
        rules: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                use:{
                    loader:'babel-loader',
                    query:{
                        presets:['react','es2015','stage-2']
                    }
                }
            }
        ]
    },
    mode: 'development',
    watch: true

}

module.export = config;

Package.json File is

{
  "name": "reactjs-basics",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": " npm run build",
    "build": "webpack -d && copy src\\app/index.html dist\\index.html && webpack-dev-server --content-base src\\ --inline --hot",
    "build:prod": "webpack -p && cp src\\app/index.html dist\\index.html"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "2015": "0.0.1",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  }
}

**

for reference, Folder Structure with Webpack config code i have attache an image below

**

Please Click here for folder structure, code and folder structure is juxtaposed

Answer 1

You've to modify few things

• In your webpack.config.js you have module.export . This is incorrect. it has to be module.exports
• You're using babel-core@6.26.3 with babel-loader@8.0.5 . babel-loader@8.* is not compatible with babel-core@6.* . You've to use babel-loader@7 . Uninstall your existing babel-loader using npm uninstall -D babel-loader and install babel-loader@7 using npm install -D babel-loader@7

Another thing i noted is, you have specified mode: 'development' in your webpack.config.js . its better to set mode to development or production via runtime parameters

Update

Remove mode & watch from your webpack.config.js

mode: 'development',
watch: true

Update your package.json with below details.

Development mode You don't need to set watch & mode as webpack-dev-server will do that for you when you run npm run dev

"scripts": {
    "webpack": "webpack",
    "dev": "mkdir -p dist && cp ./src/index.html dist/index.html && webpack-dev-server",
    "prod": "mkdir -p dist && cp ./src/index.html dist/index.html && npm run webpack -- --mode production"
}

To launch local server you need to add below configuration in your webpack.config.js . Note the directory name to which the devserver points to.

devServer: {
    contentBase: path.join(__dirname, "dist/"),
    port: 9000
},

Production mode Execute npm run prod to build your project in production mode

You can see localhost in working state when your run npm run dev .This server is launched by webpack-dev-server library. For production build you have to configure your own server

Let me know if this helps