The Complete React Web Developer Course (2nd Edition)


06 Webpack

# npm -g remove babel-cli live-server
$ npm install --save babel-cli live-server


$ vi package.json


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "name": "INDECISION-APP",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "live-server public/",
    "build": "babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1"
  },
  "dependencies": {
    "babel-cli": "^6.26.0",
    "live-server": "^1.2.0"
  }
}
$ npm run serve
$ npm run build


050 Installing Configuring Webpack

$ npm install --save [email protected]


index.html


1
2
3
4
5
6
7
8
9
10
<html>
<head>
    <meta charset="UTF-8">
    <title>Indecision App</title>
</head>
<body>
    <div id="app"></div>
    <script src="/bundle.js"></script>
</body>
</html>


package.json


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  "name": "INDECISION-APP",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "live-server public/",
    "build": "webpack --watch",
    "build-babel": "babel src/app.js --out-file=public/scripts/app.js --presets=env,react --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1"
  },
  "dependencies": {
    "babel-cli": "^6.26.0",
    "live-server": "^1.2.0",
    "webpack": "^3.1.0"
  }
}


webpack.config.js


1
2
3
4
5
6
7
8
9
const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    }
};


053 Importing npm Modules

example


$ npm install --save [email protected]



$ vi src/app.js


1
2
3
    import validator from 'validator';

    validator.isEmail('[email protected]');



$ vi src/app.js


1
2
3
4
5
6
    import React from 'react';
    import ReactDOM from 'react-dom';

    const template = React.createElement('p', {}, 'testing 123');
    ReactDOM.render(template, document.getElementById('app'));
    


054 Setting up Babel with Webpack


webpack.config.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    const path = require('path');

    module.exports = {
        entry: './src/app.js',
        output: {
            path: path.join(__dirname, 'public'),
            filename: 'bundle.js'
        },
        module: {
            rules: [{
                loader: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            }]
        }
    };


.babelrc


1
2
3
{
    "presets": ["env", "react"]
}


1
2
3
4
5
import React from 'react';
import ReactDOM from 'react-dom';

const template = <p>This is JSX from WebPack</p>;
ReactDOM.render(template, document.getElementById('app'));


055 One Component per File, 056 Source Maps with Webpack

webpack.config.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            loader: 'babel-loader',
            test: /\.js$/
        }]
    },
    devtool: 'cheap-module-eval-source-map'
};


057 Webpack Dev Server

$ npm install --save [email protected]


package.json


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
    {
      "name": "INDECISION-APP",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "serve": "live-server public/",
        "build": "webpack",
        "dev-server": "webpack-dev-server"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "babel-preset-env": "^1.6.0",
        "babel-preset-react": "^6.24.1"
      },
      "dependencies": {
        "babel-cli": "^6.26.0",
        "babel-core": "^6.25.0",
        "babel-loader": "^7.1.1",
        "live-server": "^1.2.0",
        "react": "^16.0.0",
        "react-dom": "^16.0.0",
        "validator": "^8.0.0",
        "webpack": "^3.1.0",
        "webpack-dev-server": "^2.5.1"
      }
    }


webpack.config.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            loader: 'babel-loader',
            test: /\.js$/
        }]
    },
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        host: '0.0.0.0',
        port: 8080,
        contentBase: path.join(__dirname, 'public')
    }
};


$ npm run dev-server