React+webpack+webstorm Development Environment Construction

Software that needs to be installed

• node. js
• NPM Package Management
• Webstorm

There is no need for a separate installation of NPM since the 6.3.0 version will come with NPM package management

Nodejs (including NPM) installed in the default path C:\Program Files\nodejs better, not very big

After the Webstrom installation is complete, select License Server in the License Activation window that opens.

Enter the URL in the input box: http://idea.iteblog.com/key.php

Last Click Activate

Build projects and install dependent packages

• Create a new blank item using Webstorm
• Open the console and enter a command in the console npm init to initialize a Package.json file, which is a file similar to Pom.xml, used to describe the dependent libraries that are needed.
• Enter the following command in the console

NPM install Webpack webpack-dev-server Babel--save-devnpm install react react-dom babel-loader less-loader css-loader sty Le-loader url-loader file-loader babel-preset-es2015 babel-preset-react react-hot-loader jquery eslint Eslint-plugin-react--save-dev

--save-dev will download the relevant information of the package to the Package.json devdependencies inside to facilitate the release, others use only need to npm install be able to download the relevant dependencies in the current project.

Before the version of the package in Package.json ^ can be installed like 2.x.x version of the components but not the 3.x.x version of the software installed
Before the version of the package in Package.json ~ can be installed 2.1.x software cannot install 2.3.x software

Create a new Webpack.config.js file and add the following information to the file

/** * Created by Diablo on 17/11/11.*/' Use strict ';varWebpack = require (' Webpack '));varCommonsplugin =NewWebpack.optimize.CommonsChunkPlugin (' Common ');varPath = require (' path '); Module.exports={devtool:' Eval ', entry: [' webpack-dev-server/client?http://localhost:3000 ',        ' Webpack/hot/only-dev-server ',        './src/js/entry.js '], Output: {Path:path.join (__dirname,' Dist '), FileName:' [Name].js ', Publicpath:'/static/'}, plugins: [NewWebpack. Hotmodulereplacementplugin (), Commonsplugin], module: {loaders: [{test: /\.css$/, Loader:' Style-loader!css-loader '}, {test:/\.jsx?$/, loaders: [' Babel-loader '], exclude:/node_modules/,}, {test:/\. (png|jpg) $/, Loader:' url-loader?limit=8192 '}, {test:/\.less$/, Loader:' Style-loader!css-loader!less-loader '}, {test:/\.woff (2)? (\?v=[0-9]\. [0-9]\. [0-9])? $/, Loader:"Url-loader?limit=10000&mimetype=application/font-woff"}, {test:/\. (ttf|eot|svg) (\?v=[0-9]\. [0-9]\. [0-9])? $/, Loader:"File-loader"}]}, resolve: {extensions: ['. js ', '. json ', '. Less ']    }};

Here I canceled the loders inside of the React-hot-loader package load, this is in the change code when the site content will be automatically modified, no effect, after each modification to manually refresh the site, because NPM run start has been here error caused the compilation failed, We're going to cancel the load on this package.

It turned out to be such a loaders: [' React-hot-loader ', ' Babel-loader '],

Create a new .babelrcThe contents of the file are as follows:

{  "presets": ["es2015", "React"]}

The above is information about the Babel plugin.

Create a new .eslintrcThe contents of the file are as follows:

{  "Ecmafeatures": {    "JSX":true,    "Modules":true  },  "Env": {    "Browser":true,    "Node":true  },  "Parser": "Babel-eslint",  "Rules": {    "Quotes": [2, "single"],    "Strict": [2, "Never"],    "React/jsx-uses-react": 2,    "React/jsx-uses-vars": 2,    "React/react-in-jsx-scope": 2  },  "Plugins": [    "React"  ]}

This configuration is to set JS code related specifications

Add the following to the new Server.js file:

/** * Created by Diablo on 17/11/11.*/varWebpack = require (' Webpack '));varWebpackdevserver = require (' Webpack-dev-server '));varConfig = require ('./webpack.config '));Newwebpackdevserver (webpack (config), {publicPath:config.output.publicPath, hot:true, inline:true, Historyapifallback:true}). Listen (, ' localhost ',function(err, result) {if(err) {returnConsole.log (ERR); } console.log (' Listening at Http://localhost:3000/');});

Modify Package.json to modify the following:

  "Scripts": {    "test": "Echo \" Error:no test specified\ "&& exit 1",    "start": "Node Ser Ver.js ",    " lint ":" Eslint src "  },

Create src/jsFolder

Create src/js/helloworld.js

Import React, {Component} from ' React 'default  class Hello extends Component {    render () {        /c2>return  (        <div>        This is a simple section</p>        <p> construction </p>        </div>    );}  }

Create src/js/entry.js

Import React from ' React 'react-dom'./helloworld '; Reactdom.render (
Create a index.html under the project directory
<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <title>Test</title></Head><Body><DivID= "root"></Div><Scripttype= "Text/javascript"src= "/static/common.js"CharSet= "Utf-8"></Script><Scripttype= "Text/javascript"src= "/static/main.js"CharSet= "Utf-8"></Script></Body></HTML>
Actually, Main.js has nothing to show.
Running in the consolenpm run start, enter in the browserhttp://localhost:3000/Find the following:
The directory structure after completion
Reference Links:
http://www.jianshu.com/p/bf6ca7cb7f8a
 React+webpack+webstorm Development Environment Setup