入口模块未找到错误 - 在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的代码如下：

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文件是什么"

{
  "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"
  }
}

英译中：

**

供参考，我在下面附上了带有Webpack配置代码的文件夹结构图片

**

请点击此处查看文件夹结构，代码和文件夹结构并置

- Amaan Imtiyaz

---

将您的 entry 对象修改为 entry: './src/app/index.js'，并执行 webpack 脚本以测试是否可用。 - divine

@divine测试了一下，不起作用 :( - Amaan Imtiyaz

你能分享你代码库的 Git 链接吗？ - divine

@divine 这是我的 Git 链接 https://github.com/avvncor/reactJs-basics - Amaan Imtiyaz

请查看以下链接以通过CLI设置模式：https://webpack.js.org/configuration/mode/ - divine

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，然后安装babel-loader@7，使用npm install -D babel-loader@7

我注意到另一件事情是，在你的webpack.config.js中指定了mode: 'development'。最好通过运行时参数将mode设置为development或production

更新

从你的webpack.config.js中删除mode和watch

mode: 'development',
watch: true

请在您的package.json中更新以下细节。

开发模式 当您运行npm run dev时，您不需要设置watch 和 mode ，因为webpack-dev-server会为您完成。

"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"
}

为了启动本地服务器，您需要在您的 webpack.config.js 中添加以下配置。请注意 devserver 指向的目录名称。

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

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

当您运行npm run dev时，可以看到本地主机处于工作状态。这个服务器是由webpack-dev-server库启动的。对于生产环境构建，您必须配置自己的服务器

如果有帮助，请告知我

- divine

---

@AmaanImtiyaz 当你运行 npm run dev 时，你可以看到本地主机处于工作状态。这个服务器是由 webpack-dev-server 库启动的。对于 生产构建，你需要配置自己的服务器。 - divine

@devine，它没有起作用，我已经更新了我的git，您可以从那里查看并进行更正。 - Amaan Imtiyaz

@AmaanImtiyaz 我建议你从 package.json 的 scripts 中删除所有内容。然后复制我的回答中的 "scripts" 代码，将其粘贴到 package.json 的 scripts 中。然后执行 npm run dev。你正在使用 copy 命令而不是 cp 命令将文件从一个文件夹复制到另一个文件夹。你使用的是哪个操作系统？ - divine

@AmaanImtiyaz 那么，为了测试您的项目是否正常工作，可以尝试以下操作，稍后再进行优化。在项目内手动创建 dist 文件夹。复制此 scripts 并在项目中使用它进行测试。 "scripts": { "webpack": "webpack", "dev": "webpack-dev-server", "prod": "npm run webpack -- --mode production" } - divine

@AmaanImtiyaz 不要忘记将你的 index.html 文件移动到 dist 文件夹中。你需要在 Windows 中找到替代命令来 复制文件 和 创建目录。 - divine

@AmaanImtiyaz 没问题。如果你愿意，可以点赞。webpack网站有很好的文档，你可以阅读它以了解更多信息。 - divine