react-webpack--development of a React project required preparation

NPM init-generate a Package.json file

Install dependent NPM install–save react npm install–save react-dom npm install–save-dev webpack npm install–save-dev webpack-dev-s erver npm install–save-dev babel-core npm install–save babel-polyfill npm install–save-dev babel-loader npm Install–sa Ve-dev style-loader css-loader npm install–save-dev file-loader npm install–save babel-runtime npm Install–save-dev Bab El-plugin-transform-runtime npm install–save-dev babel-preset-es2015 npm install–save-dev babel-preset-react NPM Install–save-dev babel-preset-stage-2 npm install–save webpack-cli ' npm Install–save-dev node-sass//can not be added, corresponding to the following configuration in the section about sass to delete npm Install–save-dev sass-loader//can not add NPM install Redux React-redux//Do not know redux can not add

Open Package.json and add the following scripts:

"Scripts": {
"Start": "Webpack-dev-server–hot–inline–colors–content-base./build",
"Build": "Webpack–progress–colors"
}

Configuring the Webpack.config.js File

Create a new Webpack.config.js file under the root directory and enter the following:

'
var webpack = require (' Webpack ');
Module.exports = {
 entry: './src/app/index.js ',
 output: {
     path: __dirname + '/build ',
     filename: " Bundle.js "
 },
 module: {
     rules: [{
         test:/\.js$/,
         exclude:/node_modules/,
         loader: ' Babel-loader ',
         query: {
             plugins: [' transform-runtime '],
             presets: [' es2015 ', ' react ', ' stage-2 ']
         }
     }, 

     {
         test:/\.css$/,
         use:[' Style-loader ', ' Css-loader ']
     },

     {
        test:/\. scss$/, use
        : [
            ' Css-loader ',
            ' Sass-loader '
    }},
    {
        test:/\. ( PNG|SVG|JPG|GIF|MP4) $/, use
        : [' File-loader '
    }]
    }
};
```

Basic configuration complete next look at the directory
After writing the code run npm start can run up just contact react friends can go to crossing Web tutorial, two code on a scaffold, do not need to match. Very friendly to beginners. –> Portal <–