Skip to content

Instantly share code, notes, and snippets.

@warlord0

warlord0/.babelrc

Last active Sep 22, 2018
Embed
What would you like to do?
React / Webpack template
{
"presets":[
"@babel/preset-env", "@babel/preset-react"
]
}
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