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的環境搭建進行一個記錄存檔