Привет, мир с ReactJS, Webpack и Babel
Я хочу напечатать простой Hello World с помощью React. Вот моя структура каталогов приложения:
webpack.config.js
const path = require('path');
module.exports = {
entry: {
app: './js/app.js'
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'build')
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
},
stats: {
colors: true
},
devtool: 'source-map'
};
js / app.js
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
<link href = "css/styles.css" rel = "stylesheet" type = "text/css">
</head>
<body>
<div id = "root"></div>
<script src = "build/app.bundle.js"></script>
</body>
</html>
package.json
{
"name": "es6-tutorial-react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack --mode=development"
},
"repository": {
"type": "git",
"url": "git+https://github.com/ccoenraets/es6-tutorial-react.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/ccoenraets/es6-tutorial-react/issues"
},
"homepage": "https://github.com/ccoenraets/es6-tutorial-react#readme",
"devDependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
}
}
Когда я запускаю npm run webpack, он возвращает ошибку:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.module has an unknown property 'loaders'. These properties are valid: object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? } -> Options affecting the normal modules (
NormalModuleFactory). npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] webpack:webpack --mode=developmentnpm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] webpack script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in: npm ERR!
C:\Users\User\AppData\Roaming\npm-cache_logs\2018-10-15T10_57_59_640Z-debug.log
Пожалуйста. Помогите спасибо.
Ответы 3
Вы используете код из webpack v3, но установили webpack v4. Загрузчик называется rules в v4. Вместо этого следуйте актуальному руководству: https://webpack.js.org/guides/getting-started/ или https://www.valentinog.com/blog/react-webpack-babel/ и т. д.
Вы также установили новые предустановки из @babel, поэтому убедитесь, что ваш .babelrc правильный и не следуете старому руководству <= v6.
Как уже сказал @Dominic, используйте свойство rules вместо loaders. Что выглядит следующим образом:
...
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
}
]
},
...
Еще одна вещь, которую вам нужно исправить, находится в вашем index.html:
Change this: <script src = "build/app.bundle.js"></script>
To this: <script src = "build/bundle.js"></script>
Потому что в вашем webpack.config.js вы указали имя выходного файла как bunlde.js, а не app.bundle.js.
Надеюсь, это помогло!
Уменьшите версию, ваша проблема будет решена.
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-eslint": "^8.2.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",