本文介紹了react.js使用webpack搭配環(huán)境的入門教程，分享給大家，也給自己做個筆記
如果你想直接上手開發(fā)，而跳過這些搭配環(huán)境的繁瑣過程，推薦你使用官方的create-react-app命令
npm install -g create-react-app //安裝create-react-app腳手架 npm為node.js的包管理工具，請確保你已經(jīng)安裝了node.jscreate-react-app my-app //使用create-react-app創(chuàng)建，my-app為項目名稱cd my-app/ //進(jìn)入my-app目錄npm start //運(yùn)行項目
現(xiàn)在打開 http://localhost:3000/ 就能看到初始界面
我不大愿意使用官方自帶這個腳手架，是因為它的webpack配置太復(fù)雜，我比較愚鈍看不大懂，還望有大神能研究透徹分享一下。
要如何create-react-app內(nèi)部的webpack配置文件解壓出來？
npm run eject
源代碼
每次看教程我都喜歡先把項目跑起來，然后再一句一句代碼地去了解。如果你也是：
git clone https://github.com/lingjiawen/HelloReact.gitcd HelloReact/npm installnpm run dev
一、創(chuàng)建項目結(jié)構(gòu)
新建一個文件夾，命名為HelloReact
順口提一下，我用的IDE是Sublime
在該文件夾內(nèi)這樣組織你的項目結(jié)構(gòu)：
|--app //項目組件 |--components //組件結(jié)構(gòu) |---Hello.jsx |--main.js //入口文件|--build //項目build文件 |--index.html //索引html|--.babelrc //babel轉(zhuǎn)碼工具配置文件|--package.json //npm說明文件，可以理解為包管理文件|--webpack.config.js //webpack配置文件
在build/index.html中拷貝以下代碼：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>ReactDemo1</title> </head> <body> <!--插入React組件的位置--> <div id="main"> </div> <script src="bundle.js"></script> </body></html>
React代碼插入到main中，而bundle.js是webpack打包生成的js文件，在這里你可以先幫它記下來下文看到了再回來一看就清楚了。
在package.json中輸入以下代碼：
注意，所有的注釋都不要輸入進(jìn)去！
//package.json{ "name": "HelloReact", //項目名字 "version": "1.0.0", //項目版本 "main": "webpack.config.js", "scripts": { "start": "webpack", //npm start的配置 }, "author": "", //作者 "license": "ISC", "devDependencies": { //調(diào)試依賴項 "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "babel-plugin-react-transform": "^2.0.2", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "react": "^15.6.1", "react-dom": "^15.6.1", "react-transform-hmr": "^1.0.4", "webpack": "^3.4.1", }, "description": "", "dependencies": { //項目依賴項 }}在webpack配置文件webpack.config.js中輸入以下代碼：
var webpack = require('webpack');//引入Webpack模塊，注意這里只能使用ES5語法引入module.exports = { entry: __dirname + "/app/main.js",//唯一入口文件 output: { path: __dirname + "/build",//打包后的bundle.js文件存放的地方 filename: "bundle.js" //打包后的文件名 }, module: { //loaders加載器 loaders: [ { test: //.(js|jsx)$/, //匹配loaders所處理的文件的擴(kuò)展名的正則，如jsx和js文件 loader: 'babel-loader' //loader的名稱 } ] }, plugins: [ new webpack.HotModuleReplacementPlugin()//熱模塊替換插件 ]};.babelrc是babel轉(zhuǎn)碼器的配置文件，它能將es6代碼轉(zhuǎn)換成es5代碼，還支持react語法轉(zhuǎn)換
在.babelrc中輸入以下代碼：
//.babelrc{ "presets": [ "react", "es2015" ], "env": { "development": { "plugins": [ [ "react-transform", { "transforms": [ { "transform": "react-transform-hmr", "imports": [ "react" ], "locals": [ "module" ] } ] } ] ] } }}在app/components/Hello.jsx中輸入以下代碼：
import React from 'react'; //引入react//創(chuàng)建組件類：名字首字母必須大寫class Hello extends React.Component { render() { return ( <div>Hello World!</div> ) }}//導(dǎo)出組件export default Hello;React 使用 JSX 來替代常規(guī)的 JavaScript。
JSX 是一個看起來很像 XML 的 JavaScript 語法擴(kuò)展。
它看起來是在Javascript代碼里直接寫XML的語法，而實質(zhì)上是一個語法糖，每一個XML標(biāo)簽都會被JSX轉(zhuǎn)換工具（如babel）轉(zhuǎn)換成純Javascript代碼
在app/main.js中輸入以下代碼：
//main.jsimport React from 'react';import ReactDOM from 'react-dom';import Hello from './components/Hello.jsx';ReactDOM.render( <Hello />, document.getElementById('main'));二、運(yùn)行項目
打開命令行，cd到HelloReact文件夾目錄，運(yùn)行
npm install
該命令會安裝package.json的所有依賴文件，安裝完成后，運(yùn)行：
npm start
npm start命令是剛才你在package.json中定義的:
"scripts": { "start": "webpack", }注：只有start可以省略run，其他都需要加上run，如 npm run dev；
你會發(fā)現(xiàn)build.js中多了bundle.js文件，這是你在webpack.config.js中定義的打包文件：
var webpack = require('webpack');//引入Webpack模塊，注意這里只能使用ES5語法引入module.exports = { …… output: { path: __dirname + "/build",//打包后的bundle.js文件存放的地方 filename: "bundle.js" //打包后的文件名 }, ……};打開該目錄下的index.html，看到以下輸出運(yùn)行成功：
三、添加熱替換模塊
項目已經(jīng)可以運(yùn)行了，但是每次輸完代碼都要npm start進(jìn)行打包，想想都沒辦法忍受，這就需要用到webpack-dev-server熱替換模塊，所見即所得
其實在前面的代碼中，為了避免麻煩，我已經(jīng)偷偷將熱替換模塊的部分配置加了進(jìn)去
webpack.config.js中的
……plugins: [ new webpack.HotModuleReplacementPlugin()//熱模塊替換插件 ]……
package.json中的
"devDependencies": { …… "babel-plugin-react-transform": "^2.0.2", "react-transform-hmr": "^1.0.4", "webpack-dev-server": "^2.6.1" …… }還有.babelrc中的
"env": { "development": { "plugins": [ [ "react-transform", { "transforms": [ { "transform": "react-transform-hmr", "imports": [ "react" ], "locals": [ "module" ] } ] } ] ] } }你可以將這些代碼刪除，發(fā)現(xiàn)也是可以正常打包并運(yùn)行。因為之前并沒有用到熱加載
那我現(xiàn)在想用，要怎么用呢？
很簡單，在package.json中加入：
…… "scripts": { "start": "webpack", "dev": "webpack-dev-server" }……好，現(xiàn)在運(yùn)行一下npm run dev
打開localhost:8080
咦，怎么是列出文件列表，哦哦哦，原來是沒有配置默認(rèn)路徑；
…… "scripts": { "start": "webpack", "dev": "webpack-dev-server --contentBase='./build' " }……重新運(yùn)行npm run dev：
修改app/components/Hello.jsx
保存后再回到頁面，發(fā)現(xiàn)頁面已經(jīng)自動更新：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
