Commit f55c42d4 authored by Elisabeth Reuhl's avatar Elisabeth Reuhl
Browse files

webpack, babel, react setup

parent 787f4f92
node_modules
dist
{
"name": "ltc_website",
"version": "1.0.0",
"description": "",
"main": "index.js",
"babel":{
"presets" : [
"@babel/preset-env",
"@babel/preset-react"
]
},
"scripts": {
"start": "webpack-dev-server --config ./webpack.config.js --mode development",
"build": "webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.7.2",
"@babel/preset-env": "^7.7.1",
"@babel/preset-react": "^7.7.0",
"babel-loader": "^8.0.6",
"css-loader": "^3.2.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^1.0.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.9.0"
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<title>my-app</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class App extends React.Component{
render(){
return(
<div>Hello World</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry : './src/index.js',
output : {
path : path.resolve(__dirname , 'dist'),
publicPath: '/',
filename: 'index_bundle.js'
},
resolve: {
modules: [__dirname + './src', 'node_modules'],
extensions: ['.js', '.jsx']
},
devServer: {
contentBase: './dist',
historyApiFallback: true
},
module : {
rules : [
{test : /\.(js|jsx)$/, exclude: /node_modules/, use:'babel-loader'},
{test : /\.css$/, use:['style-loader', 'css-loader']}
]
},
// mode:'development',
plugins : [
new HtmlWebpackPlugin ({
template : 'src/index.html'
})
]
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment