react+webpack+webstorm开发环境搭建

要安装的软件

• node.js
• npm包管理

以上两个包的下载地址以下：

https://nodejs.org/en/download/

因为6.3.0版本以后会自带npm的包管理因此不须要单独的安装npm

更换npm库的源

因为国内的网络缘由，推荐只用阿里的npm源地址

npm config set registry https://registry.npm.taobao.org

构建项目

• 使用webstorm新建一个空白项目
• 经过alt+f12来打开webstorm的控制台
• 在控制台输入如下命令

1.初始化一个package.json文件，这个文件是一个相似于pom.xml的文件，用来描述须要的依赖库。
npm init

 

 

2.依次输入如下命令
npm install webpack webpack-dev-server babel --save-dev
npm install react react-dom babel-loader less-loader css-loader style-loader url-loader file-loader babel-preset-es2015 babel-preset-react react-hot-loader jquery eslint eslint-plugin-react babel-core babel-eslint babel-plugin-import --save-dev
npm install webpack-cli -g

--save-dev 会把下载包的相关信息写到package.json的devDependencies里面方便之后发布，其余人使用的时候只须要npm install就能够把相关的依赖下载到当前的项目里面。

-g表示把这这个包安装在全局中

在package.json里面包的版本以前的^表示能够安装相似2.x.x版本的组件可是不能安装3.x.x版本的软件
在package.json里面包的版本以前的~表示能够安装2.1.x的软件不能安装2.3.x的软件

• 新建一个webpack.config.js的文件，在文件里面添加以下信息　

 1 var webpack = require('webpack');
 2 module.exports = {
 3     //二、进出口文件配置
 4     entry:
 5         // 'webpack-dev-server/client?http://localhost:3000',
 6         // 'webpack/hot/only-dev-server',
 7         __dirname+'/jsproject/entry.js',//指定的入口文件,“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录
 8     output: {//输出
 9         path: __dirname+'/index',//输出路径
10         filename: 'bundle.js',//输出文件名
11         publicPath: '/index/'
12     },
13     module: {//在配置文件里添加加载器说明，指明每种文件须要什么加载器处理，
14         // 配置规则时不该加载json-loader，由于如今的版本自己会解析json数据，再加载一次会致使json被解析两次，出现错误
15         rules: [{
16             test: /\.js$/,
17             exclude: /node_modules/,
18             loader: 'babel-loader',
19         }, {
20             test: /\.vue$/,
21             exclude: /node_modules/,
22             loader: 'vue',
23         }, {
24             test: /\.css$/,
25             exclude: /node_modules/,
26             // loader: "css-loader!style-loader",
27             use: [
28                 {
29                     loader: "style-loader"
30                 },
31                 {
32                     loader: "css-loader",
33                     options: {
34                         importLoaders:1
35                     }
36                 },
37             ]
38         }, {
39             test: /\.(html|tpl)$/,
40             exclude: /node_modules/,
41             loader: 'html'
42         }, {
43             test: /\.jsx$/,
44             exclude: /node_modules/,
45             loaders: ['jsx', 'babel']
46         }],
47         noParse: /jquery|lodash/,
48 
49         unknownContextRegExp: /$^/,
50         unknownContextCritical: false,
51 
52         exprContextRegExp: /$^/,
53         exprContextCritical: false,
54 
55         wrappedContextRegExp: /$^/,
56         wrappedContextCritical: false,
57     },
58     //四、服务器依赖包配置
59     devServer: {//注意：网上不少都有colors属性，可是实际上的webpack2.x已经不支持该属性了
60         contentBase: "./index",//本地服务器所加载的页面所在的目录
61         historyApiFallback: true,//不跳转
62         inline: true//实时刷新
63         //hot：true,//不要书写该属性，不然浏览器没法自动更新
64         //publicPath："/asses/",//设置该属性后，webpack-dev-server会相对于该路径
65     },
66     plugins:[]//插件
67 }

View Code

• 新建一个.babelrc的文件，在文件里面添加以下信息
  

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

• 新建一个.eslintrc的文件，在文件里面添加以下信息
  

  {
    "env": {
      "browser": true,
      "commonjs": true,
      "es6": true
    },
    "parserOptions": {
      "ecmaVersion": 6
    },
    "rules": {
      "indent": ["error", 2],
      "no-mixed-spaces-and-tabs": "error",
      "camelcase": "error",
      "eqeqeq": "warn",
      "curly": "error",
      "no-undef": "error",
      "no-unused-vars": "warn",
      "max-params": "warn"
    }
  }

• 新建一个server.js的文件，在文件里面添加以下信息
  

   1 var webpack = require('webpack');
   2 var WebpackDevServer = require('webpack-dev-server');
   3 var config = require('./webpack.config');
   4 
   5 new WebpackDevServer(webpack(config), {
   6     contentBase : './index/',//用来指定index.html所在目录
   7     publicPath: config.output.publicPath,//用来指定上线时运行地址
   8     hot: true,//表示热加载，使用Inline:true能够自动刷新
   9     inline:true,//启用 noInfo 后，诸如「启动时和每次保存以后，那些显示的 webpack 包(bundle)信息」的消息将被隐藏。错误和警告仍然会显示。
  10     historyApiFallback: true/*
  11     指的是当路径匹配的文件不存在时不出现404，也能够经过以下面设置指定
  12     当路径匹配的文件不存在时跳转的页面
  13      historyApiFallback:{
  14             index:'build/index.html'
  15         },
  16      */
  17     // 'disableHostCheck' : true    //不检查host地址
  18 }).listen(3000, 'localhost', function (err, result) {
  19     if (err) {
  20         return console.log(err);
  21     }
  22 
  23     console.log('Listening at http://localhost:3000/');
  24 });

  View Code
• 修改package.json添加以下内容：
  

  "scripts": { "start": "node server.js" }//在script节点下面添加"start": "node server.js"

• 根目录下依次建立文件夹css,data,index,jsproject

• css文件夹下建立文件index.css，文件内容以下
  

   1 p{
   2     font-size: 24px;
   3     padding:0 100px;
   4     color:blue;
   5 }
   6 p:nth-of-type(2) {
   7     font-size: 30px;
   8     text-align: center;
   9     color:black;
  10     font-family:"幼圆";
  11 }
  12 p:nth-of-type(3) {
  13     color: red;
  14     font-weight:bold;
  15     text-align: right;
  16 }

  View Code
• data文件夹下，建立文件index.json，文件内容以下
  

  {"name":"hello webpack", "content":"this is my first demo", "start":"Ready Go!"}

• index文件夹下，建立文件index.html，文件内容以下
  

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4     <meta charset="UTF-8">
   5     <title>myFirstDemo</title>
   6 </head>
   7 <body>
   8 <div id="app"></div>
   9 <script src="bundle.js"></script>
  10 </body>
  11 </html>

  View Code
• jsproject文件夹下，建立文件createdom.js，文件内容以下
  

   1 import React, { Component } from 'react';
   2 var message=require('./../data/index.json');
   3 export default class App extends Component {
   4     render() {
   5         return (
   6         <div>
   7             <p>{message.name}</p>
   8             <p>{message.content}</p>
   9             <p>{message.start}</p>
  10         </div>
  11     );
  12     }
  13 }
  14 // module.exports = function() {
  15 //     var greet=document.createElement('div');
  16 //     greet.innerHTML="<p>"+message.name+"</p>"+"<p>"+message.content+"</p>"+"<p>"+message.start+"</p>";
  17 //     return greet;
  18 // };

  View Code
• jsproject文件夹下，建立文件entry.js，文件内容以下
  

  1 require('./../css/index.css');
  2 import React from 'react';
  3 import ReactDOM from 'react-dom';
  4 import App from './createdom';
  5 // var createdom = require('./createdom.js');
  6 // document.getElementById('app').appendChild(createdom());
  7 ReactDOM.render(<App />, document.getElementById('app'));

  View Code
• 此时，当前项目的路径应该以下：
  
  

   

• 接下来有两种项目查看方式：
  • 一种是查看静态文件（项目打包），在控制台中输入webpack，index文件夹下会生成bundle.js文件，直接在浏览器中浏览index.html就能够看到demo效果，不须要运行任何服务，此时index文件夹下的两个文件可直接部署至服务器。
  • 另外一种是热部署的方式（开发模式），进行查看，首先修改index.html文件
    

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>myFirstDemo</title>
     6 </head>
     7 <body>
     8 <div id="app"></div>
     9 <script src="/index/bundle.js"></script>
    10 <!--注意：此处的src路径与前面的index.html不一致，路径为publicPath路径-->
    11 </body>
    12 </html>

    View Code

    而后，在控制台中输入npm run start，这种运行方式，index文件夹下不会生成bundle.js文件，查看demo效果，需在浏览器中访问连接：http://localhost:3000/

• 上述两种最后所看到的效果是一致的，效果以下：
  

   ps：该文章主要对最新版本的webstorm+webpack+react的环境搭建进行一个记录存档