我是 react 初学者。在设置安装和加载所有依赖项时，我终于运行了 npm start命令，但这会产生错误 找不到入口模块中的错误:错误:无法解析“C:\Users\me\Documents\React\react-playlist”中的“babel-loader”我已正确执行所有安装步骤。我还附上了 screenshot项目文件夹的。我还在全局安装了 webpack v 3.10.0，但这也没有用。我还尝试在 package.json 文件中插入解析加载程序代码，但这也不起作用。这是错误 picture.
P.S.:我正在关注这个 tutorial
下面是我的项目的代码。
包.json 文件:
{
"name": "react-playlist",
"version": "1.0.0",
"description": "All the course files for the Net Ninja React tutorial playlist on YouTube",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "npm run build",
"build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234"
},
"repository": {
"type": "git",
"url": "git+https://github.com/iamshaunjp/react-playlist.git"
},
"author": "me",
"license": "MIT",
"bugs": {
"url": "https://github.com/iamshaunjp/react-playlist/issues"
},
"homepage": "https://github.com/iamshaunjp/react-playlist#readme",
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
}
}
Webpack.config.js
var path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src') + '/app/index.js',
output: {
path: path.resolve(__dirname, 'dist') + '/app',
filename: 'bundle.js',
publicPath: '/app/'
},
module: {
loaders: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'env']
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
} };
索引.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React - Novice to Ninja!</title>
</head>
<body>
<script src="/app/bundle.js"></script>
</body>
</html>
最佳答案
看起来像 module.loaders您的 webpack 的部分config 用于旧版本的 webpack当您使用最新的 (3.10.0) 时。最新的 webpack 应该是这样的对于您的配置:
module: {
rules: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, "src")
],
use: {
loader: 'babel-loader'
},
options: {
presets: ['react', 'es2015', 'env']
}
},
{
test: /\.css$/,
use: {
loader: 'style-loader!css-loader'
}
}
]
全部
webpack选项在配置部分的文档中描述 here .
关于javascript - 找不到入口模块中的错误 : Error: Can't resolve 'babel-loader' ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47930067/