未找到入口模块中的错误 - 在 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.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
,您必须配置自己的服务器
如果这有帮助,请告诉我
【讨论】:
@AmaanImtiyaz 当您运行npm run dev
时,您可以看到本地主机处于工作状态。此服务器由webpack-dev-server
库启动。对于production build
,您必须配置自己的服务器
@devine 它不起作用,我已经更新了我的 git,你可以从那里看到并更正
@AmaanImtiyaz 我建议您删除 scripts
中 package.json
中的所有内容。然后从我的答案中复制“脚本”代码,然后将其粘贴到 scripts
中的 package.json
中。然后执行npm run dev
。您正在使用 copy
命令而不是 cp
到 copy
文件从一个文件夹到另一个文件夹。你用的是哪个OS
?
@AmaanImtiyaz 然后试试这个来测试你的项目是否工作正常,以后你可以让它顺利。在项目中手动创建 dist
文件夹。复制此scripts
并在您的项目中使用它进行测试。 "scripts": "webpack": "webpack", "dev": "webpack-dev-server", "prod": "npm run webpack -- --mode production"
@AmaanImtiyaz 不要忘记将您的 index.html
移动到 dist
文件夹中。您必须在 windows 中找到 copy files
和 create directory
的替代命令以上是关于未找到入口模块中的错误 - 在 Webpack 配置文件中的主要内容,如果未能解决你的问题,请参考以下文章
未找到模块:错误:无法在 webpack.common.js 中解析
Webpack 2 未解析 webpack.config.js 中的入口点
Webpack + React + TypeScript:未找到模块 ... in ... node_modules/react/