Install, configure Webpack.

1. Download node. js

2. Open a command window under a project that requires Webpack to run NPM init build package.js

3. Install Webpack, use NPM install Webpack--save-dev (installed in this directory)

4. Create a new webpack.config. js in the directory of this project (the default is to access this file, if you need to change the configuration, but I do not know how to match at the moment)

5. Configuring in Webpack.config. js

1 varWebpack = require (' Webpack '));2Module.exports = {3     //Page Portal File configuration4Entry: './js/index.jsx ',5     //ingress file Output configuration6 output:{7Path:__dirname,//This is going to be placed under an absolute path .8FileName: ' Dite.js ',9     },Ten module:{ One loaders:[ A{test:/\.scss$/,loader: ' Style-loader!css-loader!sass-loader '},//Here you need to download Style-loader css-loader sass-loader -{test:/\.jsx$/,loader: "Babel-loader", query:{ -presets:[' react ', ' es2015 '] the}}//Babel can convert ES6 to ES5 need to download Babel-loader babel-presets-es2015 babel-presets-react -         ] -     }, - //module:{ + ////Loader configuration - //loaders:[ + //{test:/\.css$/,loader: ' Style-loader!css-loader '}, A //{test:/\.js$/,loader: ' Jsx-loader?sourcemap '}, at //{test:/\.scss$/,loader: ' Style!css!sass!sourcemap '}, - //{test:/\. ( png|jpg) $/,loader: ' url-loader?limit=8192 '}//limit=8192 convert a picture less than 8kb to Base64 - //        ] - //    }, - resolve:{ -extensions:['. js ', '. json ', '. Scss '] in     }, - plugins:[ to     //remove the alarm statements in the code block +         NewWebpack.optimize.UglifyJsPlugin ({ - compress:{ theWarningsfalse *             } $         }),Panax Notoginseng         //prioritize the most used modules and assign them the smallest IDs -         //new Webpack.optimize.OccurenceOrderPlugin () the     ] +}

6. Need to introduce the new portal file './js/index.jsx ', Jsx's class capacity (there are some of the code I learned react);

1Require ('.. /css/index.scss ');2Import React from ' React ';//React's core library3Import reactdom from ' React-dom ';//provides DOM-related functionality4Import render from ' react ';5 6 varb = require ('./main '));7Console.log (B.add) + "---get data from B!!!");8 9Console.log ("AAA" +React);Ten         vari = 1; One         varMyStyle = { A  -           }; -           varNamestyle = { theFontsize:14, -Color: ' Blue ' -           }; -           varLinkstyle = { +Fontsize:18, -Color: ' Orange ' +           } A           vararr = [ at' , -'  -           ]; -           varHelloWorld =React.createclass ({ -                -Renderfunction(){ in                   return( -<div> to<name Name = { This.props.name}/> +<link site = { This.props.site}/> -</div> the                   ); *               } $           });Panax Notoginseng           varName =React.createclass ({ -Renderfunction(){ the                   return(
 This.props.name} +               } A           }); the           varLink =React.createclass ({ +Renderfunction(){ -                   return ( $<div> $<p>{ This.props.site}</p> -<a href={ This. props.site}>{ This.props.site}</a> -</div> the                       ); -               }Wuyi           }); the           varLikebutton =React.createclass ({ -Getinitialstate:function(){ Wu                   return{liked:false}; -               }, AboutHandleclick:function(event) { $                    This. setState ({liked:! This. state.liked}); -               }, -Renderfunction(){ -                   varText = This. state.liked? ' Like ': ' Don't like '; A                   return( +<p onclick={ This.handleclick}> the you {text} me, click I toggle State; -</p> $                   ); the               } the           }) the Reactdom.render ( the&LT;H1 style = {mystyle}> -{/*First Info*/} inhello,world! the{1+2} {i==1? ' True ': ' false '} the {arr} About the<LikeButton/> the thedocument.getElementById (' SetInfo ') +)

The corresponding information in 7.package

1 {2"Name": "Hello",3"Version": "1.0.0",4"Main": "Index.js",5"Scripts": {6"Test": "Echo \" Error:no test specified\ "&& exit 1",7"Start": "Webpack-dev-server--port 3000"8   },9"Author": "",Ten"License": "ISC", One"Devdependencies": { A"Babel-loader": "^6.3.2", -"babel-preset-es2015": "^6.22.0", -"Babel-preset-react": "^6.23.0", the"Browser-sync": "^2.18.7", -"Css-loader": "^0.26.2", -"Gulp": "^3.9.1", -"Gulp-autoprefixer": "^3.1.1", +"Gulp-clean-css": "^3.0.2", -"Gulp-concat": "^2.6.1", +"Gulp-minify-css": "^1.2.4", A"Gulp-sass": "^3.1.0", at"Gulp-uglify": "^2.0.1", -"React": "^15.4.2", -"React-dom": "^15.4.2", -"Runoob-react-test": "File:react", -"Sass-loader": "^6.0.2", -"Style-loader": "^0.13.2", in"Webpack": "^2.2.1", -"Webpack-dev-server": "^2.4.1" to   }, +"Dependencies": { -"React": "^15.4.2", the"React-dom": "^15.4.2" *   }, $"description": ""Panax Notoginseng}

Install, configure Webpack.