package.json
{ "name": "tmp", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "webpack": "webpack", "dev": "webpack-dev-server --open" }, "author": "", "license": "ISC", "dependencies": { "@babel/core": "^7.4.5", "@babel/preset-react": "^7.0.0", "babel-loader": "^8.0.6", "react": "^16.8.6", "react-dnd": "^8.0.3", "react-dnd-html5-backend": "^8.0.3", "react-dom": "^16.8.6", "webpack": "^4.35.0", "webpack-cli": "^3.3.5" }, "devDependencies": { "@babel/preset-env": "^7.4.5", "webpack-dev-server": "^3.7.2" } }
index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="root"></div> <script type="text/javascript" src="/build/index.js"></script> </body> </html>
.babelrc
{ "presets": ["@babel/preset-env", "@babel/preset-react"]}
webpack.config.js
const path = require('path'); module.exports = { entry: path.join(__dirname, 'src', 'index.js'), output: { path: path.resolve(__dirname, 'build'), publicPath: 'build/', filename: 'index.js' }, module: { rules: [{ test: /\.js$/, loader: 'babel-loader', exclude: '/node_modules/' } ] } };
index.js
import React from 'react'; import ReactDOM from 'react-dom'; import Container from './Components/Container.js'; ReactDOM.render( <Container/>, document.getElementById('root'));
Container.js
import React, {Component} from 'react'; import Ball from './Ball'; export default class Container extends React.Component { render() { return <Ball /> } }
Ball.js
import React, {Component} from 'react'; import ball from './images/iconfinder_02_Soccer_300768.png'; export default class Ball extends React.Component { render() { return <img src={ball} alt="ball" /> } }
{ test: /\.(png|jpg|jpeg|gif|ico|svg)$/, use: [ 'file-loader' ] }
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Email - зарегистрироваться / войти
Или зарегистрируйтесь через социальные сети: