React / Webpack template
| import React from 'react'; | |
| export default class App extends React.Component { | |
| render() { | |
| return ( | |
| <div style={{textAlign: 'center'}}> | |
| <h1>Hello World</h1> | |
| </div>); | |
| } | |
| } |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>React App Setup</title> | |
| </head> | |
| <body> | |
| <div id="root"> | |
| </div> | |
| </body> | |
| </html> |
| import React from 'react' | |
| import ReactDOM from 'react-dom' | |
| import App from './components/App.jsx' | |
| ReactDOM.render(<App />, document.getElementById('root')) |
| { | |
| "name": "react", | |
| "version": "0.1.0", | |
| "description": "React / Webpack template", | |
| "main": "./client/index.js", | |
| "author": "Warlord", | |
| "license": "GPL-3.0", | |
| "private": false, | |
| "scripts": { | |
| "start": "webpack-dev-server" | |
| }, | |
| "dependencies": { | |
| "react": "^16.5.2", | |
| "react-dom": "^16.5.2" | |
| }, | |
| "devDependencies": { | |
| "@babel/core": "^7.1.0", | |
| "@babel/preset-env": "^7.1.0", | |
| "@babel/preset-react": "^7.0.0", | |
| "babel-loader": "^8.0.2", | |
| "html-webpack-plugin": "^3.2.0", | |
| "webpack": "^4.19.1", | |
| "webpack-cli": "^3.1.0", | |
| "webpack-dev-server": "^3.1.8" | |
| } | |
| } |
| const path = require('path') | |
| const HtmlWebpackPlugin = require('html-webpack-plugin') | |
| const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ | |
| template: './client/index.html', | |
| filename: 'index.html', | |
| inject: 'body' | |
| }) | |
| module.exports = { | |
| mode: 'development', | |
| entry: './client/index.js', | |
| output: { | |
| path: path.resolve('dist'), | |
| filename: 'index_bundle.js' | |
| }, | |
| module: { | |
| rules: [ | |
| { test: /\.css$/, | |
| use: [ | |
| { loader: 'style-loader' }, | |
| { loader: 'css-loader' } | |
| ] | |
| }, | |
| { | |
| test: /\.js$/, | |
| exclude: /node_modules/, | |
| use: 'babel-loader' | |
| }, { | |
| test: /\.jsx?$/, | |
| exclude: /node_modules/, | |
| use: 'babel-loader' | |
| } | |
| ] | |
| }, | |
| plugins: [HtmlWebpackPluginConfig] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment