├── .babelrc
├── .gitignore
├── client
├── index.html
├── index.js
└── style
│ └── style.scss
├── package-lock.json
├── package.json
├── readme.md
├── server.js
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {"presets": ['env', 'react']}
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
--------------------------------------------------------------------------------
/client/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Document
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/client/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './style/style.scss';
4 | const App = () => {
5 | return Hello World2
6 | }
7 | ReactDOM.render(
8 | ,
9 | document.querySelector('#root')
10 | );
--------------------------------------------------------------------------------
/client/style/style.scss:
--------------------------------------------------------------------------------
1 | @media screen { * , *:after,*:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } }* {margin: auto; padding: auto;}
2 | html { font-size: 62.5%; } /*base sizee*/
3 | body { font-size: 1.4rem; } /* =14px all type sizes are relative to the base size*/
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "es6-tutorial",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "start": "nodemon --exec babel-node server.js --ignore client"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "devDependencies": {
13 | "babel-core": "^6.26.0",
14 | "babel-loader": "^7.1.2",
15 | "babel-preset-env": "^1.6.1",
16 | "babel-preset-es2015": "^6.24.1",
17 | "babel-preset-es2017": "^6.24.1",
18 | "babel-preset-react": "^6.24.1",
19 | "css-loader": "^0.28.9",
20 | "html-webpack-plugin": "^2.30.1",
21 | "node-sass": "^4.7.2",
22 | "sass-loader": "^6.0.6",
23 | "style-loader": "^0.20.1",
24 | "webpack": "^3.11.0",
25 | "webpack-dev-middleware": "^2.0.5",
26 | "webpack-livereload-plugin": "^1.0.0"
27 | },
28 | "dependencies": {
29 | "express": "^4.16.2",
30 | "react": "^16.2.0",
31 | "react-dom": "^16.2.0"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | A tutorial explaining how this project was constructed is here: https://dev.to/aurelkurtula/setting-up-a-minimal-node-environment-with-webpack-and-babel--1j04
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | import express from 'express';
2 | import webpackMiddleware from 'webpack-dev-middleware';
3 | import webpack from 'webpack';
4 | import webpackConfig from './webpack.config.js';
5 | const app = express();
6 | app.use(webpackMiddleware(webpack(webpackConfig)));
7 |
8 | app.listen(4000, () => {
9 | console.log('Listening');
10 | });
11 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | import webpack from 'webpack';
2 | import HtmlWebpackPlugin from 'html-webpack-plugin';
3 | import LiveReloadPlugin from 'webpack-livereload-plugin'
4 | export default {
5 | entry: './client/index.js',
6 | output: {
7 | path: '/',
8 | filename: 'bundle.js'
9 | },
10 | module: {
11 | rules: [
12 | {
13 | use: 'babel-loader',
14 | test: /\.js$/,
15 | exclude: /node_modules/
16 | },
17 | {
18 | use: ['style-loader', 'css-loader'],
19 | test: /\.css$/
20 | },
21 | {
22 | test: /\.scss$/,
23 | use: [{
24 | loader: "style-loader"
25 | }, {
26 | loader: "css-loader", options: {
27 | sourceMap: true
28 | }
29 | }, {
30 | loader: "sass-loader", options: {
31 | sourceMap: true
32 | }
33 | }]
34 | }
35 | ]
36 | },
37 | plugins: [
38 | new HtmlWebpackPlugin({
39 | template: 'client/index.html'
40 | }),
41 | new LiveReloadPlugin()
42 | ]
43 | };
44 |
45 |
--------------------------------------------------------------------------------