Reactjs Learning One (environment collocation react+es6+webpack Heat Deployment)

Reactjs Learning One (environment collocation react+es6+webpack Heat Deployment)

Reactjs this year in the front end of the ring is very fire, with three or four months, it is really suitable for front-end developers to use, it is worth digging, so here is a record of my simple learning process, the first is the react environment, because now react new version is very stable, so the recommended use es6+ Webpack to build the development environment.

First, install Nodejs, skip, install Gitbrach, skip, direct search to the relative software of the official website, download the latest official version of the software, and then the next step to complete the installation can be, very simple process, but can not be ignored, if there is a problem, ask me.

Then you install Webpack and some dependent components that are easy to package, for example, in your project folder.

1

npm init

Then just go straight in, create a new Package.json file, and add the following code:

123456789101112131415161718192021222324

"devDependencies": {  "babel-core": "^6.7.7",  "babel-loader": "^6.2.4",  "babel-preset-es2015": "^6.6.0",  "babel-preset-react": "^6.5.0",  "component-ajax": "forbeslindesay/ajax",  "css-loader": "^0.23.1",  "extract-text-webpack-plugin": "^1.0.1",  "file-loader": "^0.8.5",  "html-loader": "^0.4.3",  "html-webpack-plugin": "^2.16.1",  "moment": "^2.13.0",  "node-sass": "^3.5.3",  "react": "^15.0.1",  "react-cookie": "^0.4.6",  "react-dom": "^15.0.1",  "react-helmet": "^3.1.0",  "react-router": "^2.4.0",  "sass-loader": "^3.2.0",  "style-loader": "^0.13.1",  "url-loader": "^0.5.7",  "webpack": "^1.13.0",  "webpack-dev-server": "^1.14.1"}

Some are not required, but the recommendations are added to prevent later use, and then perform npm install these dependencies to local, console test Webpack whether the installation is successful:

1	webpack -v

If you get an error, you can try to install the Webpack into a global

1	npm install -g webpack

Next, you create a new webpack.config.js configuration file, and then paste the following code in.

View Code

Code a bit more, but we can try to understand him, because Webpack and gruntjs a bit similar, is all configuration items, so more need to refer to Webpack API to configure.  Anyway, I am looking dizzy, so I do not recommend that beginners have been entangled in this configuration, or to see my configuration, where the use of Process.env.NODE_ENV this environment variable as a webpack parameter, convenient for me to play different items of the package, and then according to this feature and modulesdirectories role, I can package the time to specify a different JS folder, what is the use of it, that is, my parameters (that is, node_env) is production, JS default directory is

["Web_modules", "Node_modules", "bower_components", "App/devconfig", "App/msconfig"];

When I import in the code, I can omit it. /.. /.. /This, he will go to these files first to find out if there is this JS. In fact, with my project, your normal project can ignore this piece of configuration.

Then I hit a couple of files in a base.js,

Vendor: ["React", "react-dom", ' whatwg-fetch ', ' react-router ')

New Webpack.optimize.CommonsChunkPlugin ("Vendor", "Base.js"), Htmlplugin

It also uses a template.html, which is based on the HTML template to create a new packaged HTML reference, Why not directly with index.html this, mainly to put index.html this stay hot deployment, template will add JS hash file reference, prevent the cache caused some problems.

Here Webpack even if the configuration is complete, you can use the following methods:

WEBPACK-W//monitoring package WEBPACK-P//Compression packaging

Since there is a monitoring package, why also hot deployment, because the monitoring package will generate files, and the speed will also have an impact, and then we create the Server.js file

Config.entry.app.unshift ("webpack-dev-server/client?http://localhost:8080/");} var compiler = Webpack (config); var server = new Webpackdevserver (compiler, {});    Server.listen (8080);

The less code is that it creates an HTTP service with a port number of 8080, and automatically refreshes the page with reload skills. Open http://localhost:8080/ to see if it opens! If it is not open, it may be because you have not started the service.

Then add the following code to the index.html.

<div id= "App" ></div>    <script src= "Http://localhost:8080/webpack-dev-server.js" ></script >    <script src= "base.js" ></script>    <script src= "App.js" ></script>

So basically an environment is finished, then use npm start to start the hot deployment. Modify the code in the APP.JSX and the browser will automatically refresh to the latest results. And it is convenient to not generate the package files locally.

Reactjs Learning One (environment collocation react+es6+webpack Heat Deployment)