EduVencovsky / react-from-start

React from start tutorial

Create package.json

npm init 

Create .gitignore file

node_modules
build

Install WebPack packages

npm i -D webpack
npm i -D webpack-cli
npm i -D webpack-dev-server
npm i -D webpack-merge
npm i -D clean-webpack-plugin

Install Babel packages

npm i -D @babel/core
npm i -D @babel/node
npm i -D @babel/preset-env
npm i -D @babel/preset-react
npm i -D @babel/register
npm i -D babel-loader

Creating Babel config

Create file .babelrc

{
    "presets": [
        [
            "@babel/preset-env", {
                "targets": {
                    "node": "current"
                }
            }
        ],
        "@babel/preset-react"
    ]
}

Create src folder where all the code will be

Create folder app with index.js where will be the entry point of the client side

Create webpack.config.js file

PRODUCTION

.mode

Choose mode (e.g. development or production )

.entry

Entry point of your app

.devtool

Choose a style of source mapping to enhance the debugging process.

If you are debugging on browser and you can't see the source code, only the bundle code, it's because of the source map type you are using.

.output

• path - Directory where the output file will be
• filename - Name of the output file (e.g. bundle.js)
• publicPath - (e.g. /)

.resolve

• extensions - Automatically resolve certain extensions when importing. (e.g. ['.js', '.jsx', '.css'])

.plugins

List of usefull plugins

• HtmlWebpackPlugin
• MiniCssExtractPlugin

Prod Plugins

• UglifyJSPlugin
• webPackBundleAnalyzer

.module

rule

• rule.test Test the file name to use that rule

• rule.include Files that will be used in this rule

• rule.exclude Files that won't be used in this rule

• rule.loader

• rule.use Choose what loaders to use Common Loaders

  • babel-loader
  • file-loader
  • style-loader
  • css-loader
  • sass-loader

const path = require('path')

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src', 'app'),
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    devServer: {
        historyApiFallback: true,
    },
    module: {
        rules: [{
            test: /\.jsx?/,
            loader: 'babel-loader'
        }]
    }
}