詳解基于webpack搭建react運行環境

2019-11-19 16:26:49

字體：大中小

來源：轉載

供稿：網友

最近由于項目需要，所以嘗試使用webpack搭建react運行環境，在克服了一系列困難后，終于能在頁面輸出"Hello World"，特地把整個過程記錄下來，利人利己。

首先我創建了一個文件夾webpack-helloworld-demo，之后的大部分操作都會在這個文件夾下進行。

1.初始化文件夾

npm init //初始化一個package.json文件git init  //產生.git文件，便于之后版本提交回退

2.搭建webpack環境

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

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

現在我們可以測試下webpack有沒有安裝成功，在文件夾根目錄下創建三個文件，分別是entry.js，bundle.js，index.html，文件內容分別如下。

//entry.jsdocument.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內容為空

執行命令行：webpack ./entry.js bundle.js

之后會發現bundle.js文件下有好多代碼出現，這就是經過webpack打包后的文件。在瀏覽器打開index.html,頁面會出現Hello World，webpack安裝成功！

3.配置webpack

創建webpack.config.js文件，進行如下基本配置

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

執行命令：webpack

打開index.html出現Hello World,配置成功。

現在我們的文件目錄如下：

4.express下運行

npm install express --save-dev

創建server.js

var express = require('express'); var app = express();app.use(express.static('./')); //訪問當前目錄下的靜態文件。默認訪問index.htmlapp.listen(3000, function () {  console.log('Example app listening on port 3000!');});

執行命令：webpack // 用于打包文件node server.js // 開啟服務器

瀏覽器訪問 http://localhost:3000/ ，頁面顯示Hello World，運行成功！

5.配置 React, ES6 & Babel 6

npm install react --save-devnpm install react-dom --save-devnpm install babel-loader --save-dev // 轉換JSXnpm install babel-core --save-dev // babel的核心包npm install babel-preset-es2015-dev // es2015的babel預設npm install babel-preset-react-dev // react的babel預設

創建文件.babelrc

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

接下來就是寫react小例子測試啦，在entry.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'));

為了將組件渲染到頁面，我們需要在index.html中添加一個相當于容器的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>

瀏覽器訪問 http://localhost:3000/ ，頁面顯示Hello World，運行成功！

現在我們的文件目錄為：