React+es6+webpack Environment Construction and project introduction

Preface: After so long, small rookie finally began to formally apply react, and ES6 to develop the project. Before like a classmate of a blog style, here to paste the address: Https://iwenku.net/,PC End is what he did long ago, he recently re-made a move. After reading, I also sketched out a blog, so I began to formally build their own blog as a project practiced hand bar.

First, build the environment

1, install node

The first step is to make sure that node's environment is installed, and this is undoubtedly the case. Foreign official website words seem to have FQ, founder I in node Chinese online download. (http://nodejs.cn/) installation process will not say, founder This step is very simple.

2, initialize, generate Package.json

NPM Init (Basic direct press ENTER is available)

3, install Webpack

First global installation: NPM install-g webpack

Then Project installation: NPM install Webpack--save-dev

3, install react

NPM Install react React-dom--save-dev

4, install Babel

Because we want to use es2015, the browser is not able to directly identify, so need to install Babel plug-in, Babel plug-in is webpack need to add the loader, if not these several loaders our JSX syntax, and es2015 syntax will be error. If some code needs to call Babel's API for transcoding, use the Babel-core module.

NPM Install Babel-loader Babel-core--save-dev

Here we install the webpack1.x series, install the time to note that the webpack2.x will change.

Because the ES6 syntax is updated every year, we need some rules to convert.

NPM Install babel-preset-es2015 babel-preset-react--save-dev

5, install Webpack-dev-server

Webpack provides an optional server webpack-dev-server for local development. Webpack-dev-server is a very small express application that needs to be installed with NPM before use. Pay attention to the installation and Webpack version of the corresponding, otherwise it will be an error!

Then we modify the Package.json's start-up place:

"Scripts": {    "dev": "Webpack-dev-server--devtool--progress",    "Build": "Webpack-p"  }

6. Install other plugins　　

• Installing Autoprefixer

This plugin can automatically complete the browser prefix

NPM Install Autoprefixer--save

• Installing plug-in processing style sheets

NPM Install Style-loader Css-loader--save

Css-loader allows you to use a similar @import URL (...) method to implement the Require () function.

Style-loader adds all the computed styles to the page. The combination of the two can be used to embed the style into the Webpack packaged JS file.

If you do not want to package the CSS into the script, you can use the Extract-text-webpack-plugin plugin.

• Installing Jsx-loader

NPM Install Jsx-loader--save

7. package.json file after installation is complete

{  "Name": "React-blog",  "Version": "1.0.0",  "description": "",  "Main": "Index.js",  "Scripts": {    "Dev": "Webpack-dev-server--devtool--progress",    "Build": "Webpack-p"  },  "Repository": {    ' type ': ' Git ',    "url": "Https://github.com/sprout-echo"  },  "Author": "Sprout",  "License": "ISC",  "Devdependencies": {    "Autoprefixer": "^7.1.1",    "Babel-core": "^6.25.0",    "Babel-preset-stage-3": "^6.24.1",    "Css-loader": "^0.28.4",    "Jsx-loader": "^0.13.2",    "React": "^15.6.1",    "React-dom": "^15.6.1",    "Style-loader": "^0.18.2",    "Url-loader": "^0.5.9",    "Webpack": "^1.9.11",    "Webpack-dev-server": "^1.15.0"  },  "Dependencies": {    "Babel-loader": "^7.1.1",    "babel-preset-es2015": "^6.24.1",    "Babel-preset-react": "^6.24.1"  }}

8, create a new file Webpack.config.js

' Use strict ';varPath = require (' path ');varWebpack = require (' Webpack ')); Module.exports= {  //Create a source address for your code. Allows you to locate files and line numbers more precisely when there are any errorsDevtool: ' Eval-source-map ', entry:{main:'./src/entry.js '//Unique Portal File}, output:{path:'./build ',//where the files are stored after packingFileName: ' Main.js ',//filename of the output file after packagingPublicpath: ' Http://localhost:8800/build '//root directory After starting the local service  },  //Server Configurationdevserver:{Port:8800, colors:true,//The output in the terminal is colorHistoryapifallback:true,//do not jumpInlinetrue  //Real-time Refresh}, module:{//the loader for the file    //Url-loader is used to load the png/jpg format picture file in JS, Css/style loader is used to load the CSS file, the Less-loader loader is to compile less into a CSS file;loaders:[{test:/\.js?$/,loader: ' Jsx!babel ', include:/src/}, {test:/\.css$/,loader:[' Style-loader ', ' Css-loader ']}, {test:/\. (png|jpg) $/,loader: ' url-loader?limit=819200 '}]}, POSTCSS: [Require (' Autoprefixer ')//call Autoprefixer plug-in, CSS3 auto-complete  ],  //resolve: Used to indicate which suffixes the program auto-complete recognizesresolve:{extensions:[', '. js ', '. json ', ' coffee ']  }}

Specific explanations are added to the comments, read a lot of others write, feel different people have different wording, so specific or to have their own crossing nets, their own to explore.

9, Project launch

Can be started with the command line

Babel Demo.js--presets es2015

But each time you start to add parameters is very troublesome, so we will have to think of ways.

Create a new. babelrc file under the root directory

(Files that are not directly right-click without a file name are not allowed under Windows and can be created with the cmd command)

Type NUL>.BABELRC

Then write in the file:

{"  presets": ["es2015", "React", "stage-3"],  "plugins": []}

In addition to the methods above, you can also configure in the Package.json file to add

"Babel": {    "presets": ["es2015", "React", "stage-3"]  }

And then when we start the project, we can enter webpack directly.

NPM Run Dev

10, Project structure

Finally post the current project structure, not to build the specific content of the blog

The files in build are Webpack packaged scripts

SRC is stored in our source code, Entry.js is the portal file, Test.js is a test react code

All right! The environment has been tested, there is no problem, the next step is to devote to the specific development of the blog

React+es6+webpack Environment Construction and project introduction