Ниже приведен мой код файла index.js, который содержит компонент реагирует и реагирует на то, что я импортировал с помощью узла startegy:
let React = require('react');
let ReactDom = require('react-dom');
class App extends React.Component
{
render()
{
return <div>Hello , welcome to react</div>
}
}
ReactDom.render(<App/>, document.getElementById('appRoot'));
module.exports = App;
Ниже приведен мой файл index.html, в котором я рендерил компонент внутри элемента div с идентификатором root:
<html>
<head>
<title>
React App
</title>
</head>
<body>
<div id="appRoot">
</div>
</body>
<script src="/public/bundle.js"></script>
</html>
Файл Package.json, который содержит все стартовые скрипты и установленные мной зависимости:
{
"name": "reactapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server",
"build":"webpack --config webpack.config.js --mode development"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react": "^16.5.0",
"react-dom": "^16.5.0",
"webpack": "^4.17.2",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8"
}
}
Ниже приведен мой конфигурационный файл webpack, в котором есть все конфигурации для связывания:
module.exports = {
entry :
{
entry : __dirname + '/index.js'
},
output :
{
path : __dirname + '/public',
filename : 'bundle.js',
publicPath : '/'
},
module : {
rules :[
{
test : /\.(js|jsx)$/,
exclude : /node_modules/,
use :
{
loader: 'babel-loader',
query: {
presets : ['babel-preset-es2015','babel-preset-react']
}
}
}
]
},
resolve :
{
extensions : ['.js','.jsx']
},
devServer :
{
port : 5000
}
}
Webpack компилирует мой файл и создает bundle.js, но код файла index.js не входит в комплект. Пожалуйста помоги. заранее спасибо.