未找到入口模块中的错误 - 在 Webpack 配置文件中 [英] Error in Entry Module not found - in Webpack Config file

问题描述

我正在尝试为 ReactJs 设置 webpack.我不知道我的 Webpack 配置文件有什么问题，它给了我

<块引用>

未找到输入模块中的错误:错误:无法解析 './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');变量配置 = {条目:SRC_DIR+'/app/index.js'，输出:{路径:DIST_DIR+'/app',文件名:'bundle.js',公共路径:'/应用程序/'},模块:{规则: [{测试:/\.js?/,包括:SRC_DIR，用:{loader:'babel-loader',询问:{预设:['react','es2015','stage-2']}}}]},模式:'发展'，观看:真实}module.export = config;

<块引用>

Package.json 文件是

<代码>{"name": "reactjs-基础","版本": "1.0.0",描述": ""，"main": "index.js",脚本":{"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"},作者": ""，"license": "ISC",依赖关系":{反应":^ 16.8.6"，反应域":^16.8.6"},开发依赖":{"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 配置代码的文件夹结构

**

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

解决方案

你需要修改一些东西

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

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

更新

删除 mode &watch 从你的 webpack.config.js

mode: 'development',观看:真实

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

开发模式你不需要设置 watch &mode as webpack-dev-server 会在你运行 npm run dev

时为你做这些

脚本":{"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 指向的目录名.

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

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

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

让我知道这是否有帮助

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

解决方案

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

这篇关于未找到入口模块中的错误 - 在 Webpack 配置文件中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！