找不到入口模块的错误 - 在 Webpack 配置文件中

Question

我正在尝试为 ReactJs 设置 webpack。我不知道我的 Webpack 配置文件有什么问题

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

代码在这里 - 两个文件 "Webpack.config.js " 和 "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

你需要修改一些东西

在你的 webpack.config.js 中你有 module.export。这是不正确的。必须是 module.exports
您正在使用 babel-core@6.26.3 和 babel-loader@8.0.5。 babel-loader@8.* 与 babel-core@6.* 不兼容。您必须使用 babel-loader@7。使用 npm uninstall -D babel-loader 卸载现有的 babel-loader 并使用 npm install -D babel-loader@7

babel-loader@7

我注意到的另一件事是，您在 webpack.config.js 中指定了 mode: 'development'。最好通过运行时间参数

设置 mode to development or production

更新

从您的 webpack.config.js

中删除 mode & watch

mode: 'development',
watch: true

使用以下详细信息更新您的 package.json。

发展模式 您不需要设置 watch & mode，因为 webpack-dev-server 会在您运行 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"
}

要启动 local server，您需要在 webpack.config.js 中添加以下配置。注意 devserver 指向的 directory name。

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

生产模式执行npm run prod以在生产模式下构建您的项目

当您的运行 npm run dev 时，您可以看到 localhost 处于工作状态。此服务器由 webpack-dev-server 库启动。对于 production build 你必须配置你自己的服务器

如果有帮助请告诉我

找不到入口模块的错误 - 在 Webpack 配置文件中

Error in Entry Module not found - in Webpack Config file

reactjs

webpack

webpack-dev-server

webpack-2

webpack-4