San*_*pta 2 javascript json node.js reactjs webpack
我是初学者反应。在设置安装并加载所有依赖项时，我最终运行了该npm start命令，但这会在未找到入口模块中生成错误ERROR：错误：无法解析 'C:\Users\me\Documents 中的 'babel-loader' \React\react-playlist'我已正确执行所有安装步骤。我还附上了项目文件夹的屏幕截图。我还全局安装了 webpack v 3.10.0 但这也不起作用。我还尝试在 package.json 文件中插入解析加载程序代码，但这也不起作用。这是错误图片。
PS：我正在关注本教程
下面是我的项目的代码。Package.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配置部分适用于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选项都在此处配置部分的文档中进行了描述。
请参阅这篇文章了解详细信息（多重错误）模块未找到：错误：无法解析“babel/loader”并执行此命令：
npm install -D babel-loader @babel/core @babel/preset-env webpack
来源： https: //github.com/babel/babel-loader