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的文件，在文件里面添加如下信息　

var webpack = require('webpack');
module.exports = {
    //2、進出口文件配置
    entry:
        // 'webpack-dev-server/client?http://localhost:3000',
        // 'webpack/hot/only-dev-server',
        __dirname+'/jsproject/entry.js',//指定的入口文件,“__dirname”是node.js中的一個全局變量，它指向當前執行腳本所在的目錄
    output: {//輸出
        path: __dirname+'/index',//輸出路徑
        filename: 'bundle.js',//輸出文件名
        publicPath: '/index/'
    },
    module: {//在配置文件里添加加載器說明，指明每種文件需要什么加載器處理，
        // 配置規則時不應加載json-loader，因為現在的版本本身會解析json數據，再加載一次會導致json被解析兩次，出現錯誤
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }, {
            test: /\.vue$/,
            exclude: /node_modules/,
            loader: 'vue',
        }, {
            test: /\.css$/,
            exclude: /node_modules/,
            // loader: "css-loader!style-loader",
            use: [
                {
                    loader: "style-loader"
                },
                {
                    loader: "css-loader",
                    options: {
                        importLoaders:1
                    }
                },
            ]
        }, {
            test: /\.(html|tpl)$/,
            exclude: /node_modules/,
            loader: 'html'
        }, {
            test: /\.jsx$/,
            exclude: /node_modules/,
            loaders: ['jsx', 'babel']
        }],
        noParse: /jquery|lodash/,

        unknownContextRegExp: /$^/,
        unknownContextCritical: false,

        exprContextRegExp: /$^/,
        exprContextCritical: false,

        wrappedContextRegExp: /$^/,
        wrappedContextCritical: false,
    },
    //4、服務器依賴包配置
    devServer: {//注意：網上很多都有colors屬性，但是實際上的webpack2.x已經不支持該屬性了
        contentBase: "./index",//本地服務器所加載的頁面所在的目錄
        historyApiFallback: true,//不跳轉
        inline: true//實時刷新
        //hot：true,//不要書寫該屬性，否則瀏覽器無法自動更新
        //publicPath："/asses/",//設置該屬性后，webpack-dev-server會相對於該路徑
    },
    plugins:[]//插件
}

• 新建一個.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的文件，在文件里面添加如下信息
  

  var webpack = require('webpack');
  var WebpackDevServer = require('webpack-dev-server');
  var config = require('./webpack.config');
  
  new WebpackDevServer(webpack(config), {
      contentBase : './index/',//用來指定index.html所在目錄
      publicPath: config.output.publicPath,//用來指定上線時運行地址
      hot: true,//表示熱加載，使用Inline:true可以自動刷新
      inline:true,//啟用 noInfo 后，諸如「啟動時和每次保存之后，那些顯示的 webpack 包(bundle)信息」的消息將被隱藏。錯誤和警告仍然會顯示。
      historyApiFallback: true/*
      指的是當路徑匹配的文件不存在時不出現404，也可以通過如下面設置指定
      當路徑匹配的文件不存在時跳轉的頁面
       historyApiFallback:{
              index:'build/index.html'
          },
       */
      // 'disableHostCheck' : true    //不檢查host地址
  }).listen(3000, 'localhost', function (err, result) {
      if (err) {
          return console.log(err);
      }
  
      console.log('Listening at http://localhost:3000/');
  });

• 修改package.json添加如下內容：
  

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

• 根目錄下依次創建文件夾css,data,index,jsproject

• css文件夾下創建文件index.css，文件內容如下
  

  p{
      font-size: 24px;
      padding:0 100px;
      color:blue;
  }
  p:nth-of-type(2) {
      font-size: 30px;
      text-align: center;
      color:black;
      font-family:"幼圓";
  }
  p:nth-of-type(3) {
      color: red;
      font-weight:bold;
      text-align: right;
  }

• data文件夾下，創建文件index.json，文件內容如下
  

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

• index文件夾下，創建文件index.html，文件內容如下
  

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>myFirstDemo</title>
  </head>
  <body>
  <div id="app"></div>
  <script src="bundle.js"></script>
  </body>
  </html>

• jsproject文件夾下，創建文件createdom.js，文件內容如下
  

  import React, { Component } from 'react';
  var message=require('./../data/index.json');
  export default class App extends Component {
      render() {
          return (
          <div>
              <p>{message.name}</p>
              <p>{message.content}</p>
              <p>{message.start}</p>
          </div>
      );
      }
  }
  // module.exports = function() {
  //     var greet=document.createElement('div');
  //     greet.innerHTML="<p>"+message.name+"</p>"+"<p>"+message.content+"</p>"+"<p>"+message.start+"</p>";
  //     return greet;
  // };

• jsproject文件夾下，創建文件entry.js，文件內容如下
  

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

• 此時，當前項目的路徑應該如下：
  
  

   

• 接下來有兩種項目查看方式：
  • 一種是查看靜態文件（項目打包），在控制台中輸入webpack，index文件夾下會生成bundle.js文件，直接在瀏覽器中瀏覽index.html就可以看到demo效果，不需要運行任何服務，此時index文件夾下的兩個文件可直接部署至服務器。
  • 另一種是熱部署的方式（開發模式），進行查看，首先修改index.html文件
    

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>myFirstDemo</title>
    </head>
    <body>
    <div id="app"></div>
    <script src="/index/bundle.js"></script>
    <!--注意：此處的src路徑與前面的index.html不一致，路徑為publicPath路徑-->
    </body>
    </html>

    然后，在控制台中輸入npm run start，這種運行方式，index文件夾下不會生成bundle.js文件，查看demo效果，需在瀏覽器中訪問鏈接：http://localhost:3000/

• 上述兩種最后所看到的效果是一致的，效果如下：
  

   ps：該文章主要對最新版本的webstorm+webpack+react的環境搭建進行一個記錄存檔