詳解基于webpack搭建react運(yùn)行環(huán)境

更新時(shí)間：2017年06月01日 11:13:30 作者：DouQing

本篇文章主要介紹了詳解基于webpack搭建react運(yùn)行環(huán)境，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近由于項(xiàng)目需要，所以嘗試使用webpack搭建react運(yùn)行環(huán)境，在克服了一系列困難后，終于能在頁(yè)面輸出"Hello World"，特地把整個(gè)過(guò)程記錄下來(lái)，利人利己。

首先我創(chuàng)建了一個(gè)文件夾webpack-helloworld-demo，之后的大部分操作都會(huì)在這個(gè)文件夾下進(jìn)行。

1.初始化文件夾

npm init //初始化一個(gè)package.json文件
git init  //產(chǎn)生.git文件，便于之后版本提交回退

2.搭建webpack環(huán)境

npm install webpack --save-dev //安裝webpack依賴

--save建議使用，這樣當(dāng)別人clone你的代碼時(shí)，只需要npm install就可以安裝好所有需要的依賴，并且你也可以在你的package.json文件夾中看到你使用的哪些依賴。

現(xiàn)在我們可以測(cè)試下webpack有沒(méi)有安裝成功，在文件夾根目錄下創(chuàng)建三個(gè)文件，分別是entry.js，bundle.js，index.html，文件內(nèi)容分別如下。

//entry.js
document.write('Hello World');

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

bundle.js內(nèi)容為空

執(zhí)行命令行：webpack ./entry.js bundle.js

之后會(huì)發(fā)現(xiàn)bundle.js文件下有好多代碼出現(xiàn)，這就是經(jīng)過(guò)webpack打包后的文件。在瀏覽器打開(kāi)index.html,頁(yè)面會(huì)出現(xiàn)Hello World，webpack安裝成功！

3.配置webpack

創(chuàng)建webpack.config.js文件，進(jìn)行如下基本配置

module.exports = {
  entry: "./entry.js", // 要打包的入口文件
  output: {        //打包后的文件
    path: __dirname,  //表示使用絕對(duì)路徑
    filename: "bundle.js" //輸出文件名
  },
  module: {
    loaders: [      //用于加載一些靜態(tài)文件夾（css樣式，圖片之類）
     { test: /\.css$/, loader: "style!css" },
     {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/, //不進(jìn)行轉(zhuǎn)換的文件，可以提高打包速度
        query: {
          cacheDirectory: true,
          presets: ['react', 'es2015']
        }
      }
    ]
  }
};

執(zhí)行命令：webpack

打開(kāi)index.html出現(xiàn)Hello World,配置成功。

現(xiàn)在我們的文件目錄如下：

4.express下運(yùn)行

npm install express --save-dev

創(chuàng)建server.js

var express = require('express'); 
var app = express();

app.use(express.static('./')); //訪問(wèn)當(dāng)前目錄下的靜態(tài)文件。默認(rèn)訪問(wèn)index.html

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

執(zhí)行命令：
webpack // 用于打包文件
node server.js // 開(kāi)啟服務(wù)器

瀏覽器訪問(wèn) http://localhost:3000/ ，頁(yè)面顯示Hello World，運(yùn)行成功！

5.配置 React, ES6 & Babel 6

npm install react --save-dev
npm install react-dom --save-dev
npm install babel-loader --save-dev // 轉(zhuǎn)換JSX
npm install babel-core --save-dev // babel的核心包
npm install babel-preset-es2015-dev // es2015的babel預(yù)設(shè)
npm install babel-preset-react-dev // react的babel預(yù)設(shè)

創(chuàng)建文件.babelrc

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

接下來(lái)就是寫react小例子測(cè)試?yán)玻趀ntry.js寫入：

import React, {Component} from 'react';
import {render} from "react-dom";

class HelloMessage extends React.Component {

  render() {
    return <div>Hello World</div>;
  }
}
render(<HelloMessage />, document.getElementById('app'));

為了將組件渲染到頁(yè)面，我們需要在index.html中添加一個(gè)相當(dāng)于容器的div：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
<div id="app"></div> // 添加的div，渲染至div中
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

瀏覽器訪問(wèn) http://localhost:3000/ ，頁(yè)面顯示Hello World，運(yùn)行成功！

現(xiàn)在我們的文件目錄為：