├── .babelrc
├── .gitignore
├── README.md
├── package.json
├── src
├── index.html
├── index.js
└── style.css
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | { "presets": ["@babel/preset-env", "@babel/preset-react"] }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | package-lock.json
4 | yarn.lock
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react_webpack_babel
2 | Simple and maintainable skeleton for npm react webpack projects
3 |
4 | This project is an alternative to `npx create-react-app`. The advantage is that all the webpack and babel setting are specified explicitly rather than hidden away in `react-scripts`. This way, it is easier to understated and modify.
5 |
6 | This project is based on https://blog.usejournal.com/setting-up-react-webpack-4-babel-7-from-scratch-2019-b771dca2f637
7 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react_webpack_babel",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "start": "webpack-dev-server --open --hot --mode development",
9 | "build": "webpack --mode production"
10 | },
11 | "keywords": [],
12 | "author": "",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "@babel/core": "^7.5.0",
16 | "@babel/preset-env": "^7.5.0",
17 | "@babel/preset-react": "^7.0.0",
18 | "babel-loader": "^8.0.6",
19 | "css-loader": "^3.0.0",
20 | "html-loader": "^0.5.5",
21 | "html-webpack-plugin": "^3.2.0",
22 | "react": "^16.8.6",
23 | "react-dom": "^16.8.6",
24 | "style-loader": "^0.23.1",
25 | "webpack": "^4.35.2",
26 | "webpack-cli": "^3.3.5",
27 | "webpack-dev-server": "^3.7.2"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | React Webpack
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import './style.css'
4 | const App = () => {
5 | return Hello React,Webpack 4 & Babel 7!
;
6 | };
7 |
8 | ReactDOM.render(, document.querySelector("#root"));
--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | .red{
2 | background-color: red;
3 | color:white;
4 | }
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const HtmlWebPackPlugin = require("html-webpack-plugin");
2 | module.exports = {
3 | externals: {
4 | react: 'React',
5 | 'react-dom': 'ReactDOM'
6 | },
7 | module: {
8 | rules: [
9 | {
10 | test: /\.(js|jsx)$/,
11 | exclude: /node_modules/,
12 | use: {
13 | loader: "babel-loader"
14 | }
15 | },
16 | {
17 | test: /\.html$/,
18 | use: [
19 | {
20 | loader: "html-loader"
21 | }
22 | ]
23 | },
24 | {
25 | test: /\.css$/,
26 | use: [
27 | 'style-loader',
28 | 'css-loader'
29 | ]
30 | }
31 |
32 |
33 | ]
34 | },
35 | plugins: [
36 | new HtmlWebPackPlugin({
37 | template: "./src/index.html",
38 | filename: "./index.html"
39 | })
40 | ]
41 | };
--------------------------------------------------------------------------------