jmm/reacttest
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

React build as of https://medium.com/@philoskepsi/how-to-build-a-react-app-with-webpack-4-and-babel-7-e69314efc5db

Browse source
This commit is contained in:
Jörn-Michael Miehe 2019-03-03 15:13:52 +01:00
parent 2976a9fd31
commit 6387c2c73f
8 changed files with 6887 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
reactapp/.babelrc Normal file
View file

@ -0,0 +1,3 @@
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}

37
reactapp/package.json Normal file
View file

@ -0,0 +1,37 @@
{
"name": "react-test",
"version": "1.0.0",
"main": "index.js",
"repository": "ssh://git@code.yavook.de:22022/jmm/reacttest.git",
"author": "Jörn-Michael Miehe",
"license": "MIT",
"private": true,
"devDependencies": {
"@babel/core": "^7.3.4",
"@babel/polyfill": "^7.2.5",
"@babel/preset-env": "^7.3.4",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",
"copy-webpack-plugin": "^5.0.0",
"css-loader": "^2.1.0",
"file-loader": "^3.0.1",
"html-webpack-plugin": "^3.2.0",
"import-glob-loader": "^1.1.0",
"mini-css-extract-plugin": "^0.5.0",
"node-sass": "^4.11.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"sass-loader": "^7.1.0",
"url-loader": "^1.1.2",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.2.1"
},
"scripts": {
"start": "NODE_ENV=development webpack-dev-server --host 0.0.0.0 --mode development --progress",
"build": "NODE_ENV=production webpack --mode production"
},
"dependencies": {
"react": "^16.8.3",
"react-dom": "^16.8.3"
}
}

BIN
reactapp/src/assets/breathe.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 230 KiB

20
reactapp/src/index.ejs Normal file
View file

@ -0,0 +1,20 @@
<% const vars = htmlWebpackPlugin.options.vars %>
<% const isDev = process.env.NODE_ENV === "development" %>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/ >
<title>My React App</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet" />
<% if (!isDev) { %>
<link type="text/css" rel="stylesheet" href="./styles.css" />
<% } %>
</head>
<body>
<div id="app"></div>
</body>
</html>

17
reactapp/src/index.js Normal file
View file

@ -0,0 +1,17 @@
import "./styles/styles.scss"
import React, { Component } from "react"
import ReactDOM from "react-dom"
class MyApp extends Component {
render() {
return (
<div className="my-react-app">
<h1>My app is running!</h1>
<img src="./assets/breathe.png" />
</div>
)
}
}
ReactDOM.render(<MyApp />, document.querySelector("#app"))

5
reactapp/src/styles/styles.scss Normal file
View file

@ -0,0 +1,5 @@
body {
background: black;
color: white;
text-align: center;
}

52
reactapp/webpack.config.js Normal file
View file

@ -0,0 +1,52 @@
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const config = {
entry: "./src/index.js",
output: { filename: "./bundle.js" },
resolve: { extensions: ['.js', '.jsx'] },
devServer: { historyApiFallback: true },
plugins: [
new CopyWebpackPlugin([{ from: "./src/assets", to: "assets" }]),
new MiniCssExtractPlugin({ filename: "styles.css" }),
new HtmlWebpackPlugin({
template: "./src/index.ejs",
filename: "./index.html",
vars: {}
})
],
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: { loader: "babel-loader" }
},
{
test: /\.(png|jpe?g|gif|svg)$/i,
use: { loader: "url-loader", options: {limit: 10000} }
},
{
test: /\.scss$/,
use: [
{ loader: MiniCssExtractPlugin.loader },
{ loader: "css-loader", options: {sourceMap: true} },
{ loader: "sass-loader", },
{ loader: "import-glob-loader" }
]
}
]
}
}
if (process.env.NODE_ENV === "development") {
config.devtool = "source-map"
}
if (process.env.NODE_ENV === "production") {
config.plugins.push(new OptimizeCssAssetsPlugin())
}
module.exports = config

6753
reactapp/yarn.lock Normal file
View file

File diff suppressed because it is too large Load diff