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

Posted

技术标签:

【中文标题】未找到入口模块中的错误 - 在 Webpack 配置文件中【英文标题】:Error in Entry Module not found - in Webpack Config file 【发布时间】:2019-08-28 15:31:36 【问题描述】:

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

找不到入口模块中的错误:错误:无法解析“./src” '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 配置代码的文件夹结构我在下面附上了一张图片

**

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

【问题讨论】:

修改你的入口对象为entry: './src/app/index.js',并通过执行webpack脚本测试它是否有效 @divine 测试过,没用 :( 你能分享 git 链接到你的代码库吗? @divine 这里是我的 git 链接github.com/avvncor/reactJs-basics @divine,编译好了,谢谢。 我的本地主机不工作。它没有告诉我“Webpack 结果是来自应用程序的服务器” 【参考方案1】:

你需要修改一些东西

在您的webpack.config.js 中有module.export。这是不正确的。它必须是module.exports 您正在使用 babel-core@6.26.3babel-loader@8.0.5babel-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 中删除modewatch

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,您必须配置自己的服务器

如果这有帮助,请告诉我

【讨论】:

@AmaanImtiyaz 当您运行npm run dev时,您可以看到本地主机处于工作状态。此服务器由webpack-dev-server 库启动。对于production build,您必须配置自己的服务器 @devine 它不起作用,我已经更新了我的 git,你可以从那里看到并更正 @AmaanImtiyaz 我建议您删除 scriptspackage.json 中的所有内容。然后从我的答案中复制“脚本”代码,然后将其粘贴到 scripts 中的 package.json 中。然后执行npm run dev。您正在使用 copy 命令而不是 cpcopy 文件从一个文件夹到另一个文件夹。你用的是哪个OS @AmaanImtiyaz 然后试试这个来测试你的项目是否工作正常,以后你可以让它顺利。在项目中手动创建 dist 文件夹。复制此scripts 并在您的项目中使用它进行测试。 "scripts": "webpack": "webpack", "dev": "webpack-dev-server", "prod": "npm run webpack -- --mode production" @AmaanImtiyaz 不要忘记将您的 index.html 移动到 dist 文件夹中。您必须在 windows 中找到 copy filescreate directory 的替代命令

以上是关于未找到入口模块中的错误 - 在 Webpack 配置文件中的主要内容,如果未能解决你的问题,请参考以下文章

未找到模块:错误:无法在 webpack.common.js 中解析

vuejs webpack相关模块未找到错误

未找到模块:错误:无法使用 Webpack 解析“fs”

模块“.dll”已加载,但未找到入口点

Webpack 2 未解析 webpack.config.js 中的入口点

Webpack + React + TypeScript:未找到模块 ... in ... node_modules/react/