Skip to content

Commit 84c82de

Browse files
brauliodiezbrauliodiez
committed
boiler plate ready
1 parent 0c0a0ef commit 84c82de

File tree

7 files changed

+137
-1
lines changed

7 files changed

+137
-1
lines changed

‎hooks/00_BoilerPlate/.babelrc

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"presets": [
3+
[
4+
"@babel/preset-env",
5+
{
6+
"useBuiltIns": "entry"
7+
}
8+
]
9+
]
10+
}

‎hooks/00_BoilerPlate/Readme.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ _[./package.json](./package.json)_
6161

6262
```diff
6363
"scripts": {
64+
- "test": "echo \"Error: no test specified\" && exit 1",
6465
+ "start": "webpack-dev-server --mode development --inline --hot --open",
6566
+ "build": "webpack --mode development"
6667
},
@@ -97,7 +98,7 @@ _[./tsconfig.json](./tsconfig.json)_
9798
- Now, we need to transpile ES6 to ES5. Let's install **@babel/cli**, **@babel/core**, **@babel/preset-env** and **@babel/polyfill**.
9899

99100
```bash
100-
npm install @babel/cli @babel/core @babel/preset-env @babel/polyfill --save-dev
101+
npm install @babel/cli @babel/core @babel/preset-env @babel/polyfill --save-dev
101102
```
102103

103104
- Let's install webpack _babel_ loader.

‎hooks/00_BoilerPlate/package.json

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "react-typescript-by-sample",
3+
"version": "1.0.0",
4+
"description": "React Typescript examples",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "webpack-dev-server --mode development --inline --hot --open",
8+
"build": "webpack --mode development"
9+
},
10+
"keywords": [
11+
"react",
12+
"typescript",
13+
"hooks"
14+
],
15+
"author": "Braulio Diez Botella",
16+
"license": "MIT",
17+
"devDependencies": {
18+
"@babel/cli": "^7.2.3",
19+
"@babel/core": "^7.2.2",
20+
"@babel/polyfill": "^7.2.5",
21+
"@babel/preset-env": "^7.3.1",
22+
"awesome-typescript-loader": "^5.2.1",
23+
"babel-loader": "^8.0.5",
24+
"css-loader": "^2.1.0",
25+
"file-loader": "^3.0.1",
26+
"html-webpack-plugin": "^3.2.0",
27+
"mini-css-extract-plugin": "^0.5.0",
28+
"style-loader": "^0.23.1",
29+
"typescript": "^3.3.3",
30+
"url-loader": "^1.1.2",
31+
"webpack": "^4.29.3",
32+
"webpack-cli": "^3.2.3",
33+
"webpack-dev-server": "^3.1.14"
34+
}
35+
}

‎hooks/00_BoilerPlate/src/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title></title>
6+
</head>
7+
<body>
8+
<div class="well">
9+
<h1>Sample app</h1>
10+
</div>
11+
</body>
12+
</html>

‎hooks/00_BoilerPlate/src/main.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
document.write("Hello from main.ts !");

‎hooks/00_BoilerPlate/tsconfig.json

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es6",
4+
"module": "es6",
5+
"moduleResolution": "node",
6+
"declaration": false,
7+
"noImplicitAny": false,
8+
"jsx": "react",
9+
"sourceMap": true,
10+
"noLib": false,
11+
"suppressImplicitAnyIndexErrors": true
12+
},
13+
"compileOnSave": false,
14+
"exclude": ["node_modules"]
15+
}

‎hooks/00_BoilerPlate/webpack.config.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
var HtmlWebpackPlugin = require("html-webpack-plugin");
2+
var MiniCssExtractPlugin = require("mini-css-extract-plugin");
3+
var webpack = require("webpack");
4+
var path = require("path");
5+
6+
var basePath = __dirname;
7+
8+
module.exports = {
9+
context: path.join(basePath, "src"),
10+
resolve: {
11+
extensions: [".js", ".ts", ".tsx"]
12+
},
13+
entry: ["@babel/polyfill", "./main.ts"],
14+
output: {
15+
path: path.join(basePath, "dist"),
16+
filename: "bundle.js"
17+
},
18+
devtool: "source-map",
19+
devServer: {
20+
contentBase: "./dist", // Content base
21+
inline: true, // Enable watch and live reload
22+
host: "localhost",
23+
port: 8080,
24+
stats: "errors-only"
25+
},
26+
module: {
27+
rules: [
28+
{
29+
test: /\.(ts|tsx)$/,
30+
exclude: /node_modules/,
31+
loader: "awesome-typescript-loader",
32+
options: {
33+
useBabel: true,
34+
babelCore: "@babel/core" // needed for Babel v7
35+
}
36+
},
37+
{
38+
test: /\.css$/,
39+
use: [MiniCssExtractPlugin.loader, "css-loader"]
40+
},
41+
{
42+
test: /\.(png|jpg|gif|svg)$/,
43+
loader: "file-loader",
44+
options: {
45+
name: "assets/img/[name].[ext]?[hash]"
46+
}
47+
}
48+
]
49+
},
50+
plugins: [
51+
//Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
52+
new HtmlWebpackPlugin({
53+
filename: "index.html", //Name of file in ./dist/
54+
template: "index.html", //Name of template in ./src
55+
hash: true
56+
}),
57+
new MiniCssExtractPlugin({
58+
filename: "[name].css",
59+
chunkFilename: "[id].css"
60+
})
61+
]
62+
};

0 commit comments

Comments
 (0)