Install from scratch with Babel and Webpack

Script to install ReactJS with Babel and Webpack

1. Install globals (one time only

npm install -g babel
npm install -g babel-cli

2. Prepare the environment

Folder preparation

X:\projects>mkdir <nameoftheapp>
cd <nameoftheapp>

Init application

npm init

Just enter through all the questions.

Initialize webpack

npm install webpack --save

Install Webpack dev server

npm install --save-dev webpack-dev-server react-hot-loader

Install webpack-plugin package

npm install --save html-webpack-plugin

Install ReactJS

npm install react --save
npm install react-dom --save

Install the file-loader package

npm install file-loader --save-dev

Install Babel

npm install --save-dev babel babel-core babel-loader
npm install --save-dev babel-preset-es2015 babel-preset-react
touch .babelrc

Edit the .babelrc file with the following code:

{
    presets: ['es2015', 'react']
}

Configure Webpack

touch webpack.config.js

Open webpack.config.js in your favorite editor and put the following code in it, then save it.

var webpack = require("webpack");
 module.exports = {
     entry: {
         "react-reading-time": [
             "webpack-dev-server/client?http://localhost:8881/",
             "webpack/hot/only-dev-server",
             "./react-reading-time.jsx"
         ]
     },
     output: {
         path: __dirname,
         filename: "[name].js",
         publicPath: "http://localhost:8881/",
         chunkFilename: "[id].chunk.js",
         sourceMapFilename: "[name].map"
     },
     resolve: {
         extensions: ["", ".js", ".jsx", ".es6"],
         modulesDirectories: ["node_modules"]
     },
     module: {
         loaders: [{
                 test: /\.jsx$|\.es6$|\.js$/,
                 loader: "babel",
                 query: {
                     presets: ["es2015", "react"]
                 },
                 exclude: /node_module/
             },
             {
                 test: /\.scss$|\.css$/,
                 loader: "style-loader!style!css!sass"
             }
         ]
     },
     plugins: [
         new webpack.NoErrorsPlugin()
     ],
     devtool: "eval-source-map"
 };

Add script to package.json

Open the package.json and add the following line to the scripts tag:

"start": "webpack-dev-server --config ./webpack.config.js --hot --port 8881"

Create the src folder

Create a src folder in the root of your application

mkdir src

Create HTML start page

Create an index.html in the src folder of the application with following content:

<html lang="en">

<head>
    <title>My First React Example</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div id="react"> Hello !!</div>
    </div>
    <script src="/react-reading-time.js"></script>
</body>

</html>

npm --save install react-transform

npm install --save-dev style-loader css-loader

npm install --save-dev extract-text-webpack-plugin html-webpack-plugin

Production build

npm --save install rimraf
npm --save install modernizr-webpack-plugin
npm --save install webpack-hot-middleware
npm install --save-dev style-loader css-loader

npm install --save-dev postcss-loader autoprefixer

Last update: Tue, 13 Sep 2022 14:32:15