webpack+react環(huán)境搭建
一、webpack環(huán)境搭建
1、準(zhǔn)備工作
因?yàn)閣ebpack依賴于nodejs，因此我們應(yīng)首先安裝nodejs；而npm是js包管理工具，接著我們應(yīng)該安裝npm，
sudo apt-get update //執(zhí)行檢查可更新的軟件
sudo apt-get install nodejs
sudo apt install nodejs-legacy
sudo apt install npm
2、初始化我們的項(xiàng)目
#項(xiàng)目文件
mkdir blog && cd blog
#項(xiàng)目初始化，生成項(xiàng)目描述文件package.json
npm init
3、安裝webpack和webpack-dev-server
npm install webpack webpack-dev-server --save-dev
這會(huì)在項(xiàng)目文件里面創(chuàng)建node_modules，package.json中也多了"dependencies"和"devDependencies"兩項(xiàng)，其記錄的是當(dāng)前依賴及版本信息，其中"dependencies"為空
4、創(chuàng)建入口文件index.html
#在項(xiàng)目文件blog下面新建public/index.html
mkdir public && touch index.html
5、配置webpack
入口文件創(chuàng)建好之后，我們就要配置webpack了。在項(xiàng)目文件blog下面新建文件webpack.config.js，編輯webpack.config.js配置：
module.exports={
devServer:{
contentBase:"./public"
}
}
因?yàn)槲覀兊哪康氖莿?chuàng)建一個(gè)web服務(wù)器，只要添加如上內(nèi)容就ok了。
devServer是webpack中web服務(wù)器的相關(guān)配置項(xiàng)，contentBase指定的是頁(yè)面加載目錄，而其加載頁(yè)面默認(rèn)為index.html，由于我們的index.html是在public目錄下，因此就將contentBase設(shè)置為"./public“。
接下來(lái)在package.json中配置web服務(wù)啟動(dòng)命令，該命令配置在scripts中的，其命令名稱為“server”，命令詳情為“webpack-dev-sever --open”：
"server":"webpack-dev-server --open"
配置結(jié)果如下：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"server": "webpack-dev-server --open"
},
6、安裝webpack-cli
我們只安裝了webpack服務(wù)，而webpack命令是通過(guò)webpack-cli來(lái)執(zhí)行的，因此我們必須安裝：
npm install webpack-cli --save-dev
現(xiàn)在我們就可以啟動(dòng)他了
npm run server
二、react環(huán)境搭建
到目前為止我們都只是在講述webpack,接下來(lái)的環(huán)境搭建，我們就要明白如何使其支持react了
1、安裝react
npm install react react-dom --save
由于react是在正式環(huán)境中也需要的，因此npm安裝時(shí)沒(méi)有帶-dev參數(shù)。
2、代碼創(chuàng)建
既然webpack和react我們都安裝好了，那我們就的試試實(shí)戰(zhàn)了，我們編輯之前創(chuàng)建好的文件：
<body>
<div id='root'></div>
<script src='bundle.js'></script>
</body>
接下來(lái)在public目錄下創(chuàng)建index.jsx文件，注意后綴名是jsx，其內(nèi)容為：
import React from 'react'
import { render } from 'react-dom'
class HelloMessage extends React.Component {
render() {
return (
<h1>hello react! </h1>
)
}
}
render(
<HelloMessage/>,
document.getElementById('root')
)
jsx是react的專用語(yǔ)法，HTML是無(wú)法引用的，因此我們需要將其轉(zhuǎn)換為HTML能夠識(shí)別的JS，而這個(gè)正是webpack大顯身手的時(shí)候，我們開始來(lái)配置webpack，配置之前，我們的安裝babel環(huán)境。
3、安裝babel環(huán)境
因?yàn)閞eact是通過(guò)babel來(lái)把jsx文件轉(zhuǎn)換為js文件的，因此我們的安裝babel相關(guān)環(huán)境，我們需要安裝：
- babel-core
- babel-loader
- babel-preset-es2015
- babel-preset-react
執(zhí)行命令：
npm install babel-core babel-loader babel-preset-es2015 babel-preset-react --save-dev
4、配置webpack配置文件
由于我們要轉(zhuǎn)換的源文件是index.jsx，轉(zhuǎn)換后的目標(biāo)文件是bundle.js，因此需要在webpack中配置入口和出口，在文本webpack.config.js中增加以下內(nèi)容：
entry:__dirname+"/public/index.jsx",
output:{
path:__dirname+"/public",
filename:'bundle.js'
}
同時(shí)還要在webpack.config.js中配置loader，讓其通過(guò)外部工具來(lái)處理文件，而我們當(dāng)前要處理的是通過(guò)babel來(lái)處理jsx文件：
module.exports={
entry:__dirname+"/app/index.jsx",
output:{
path:__dirname+"/app",
filename:'bundle.js'
},
devServer:{
contentBase:"./public"
},
module: {
rules: [
{ test: /\.(js|jsx)$/, exclude: /node_modules/, loader: 'babel-loader' }
]
}
};
現(xiàn)在我們運(yùn)行npm run server ,會(huì)報(bào)如下錯(cuò)誤：
ERROR in ./public/index.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (9:15)
這時(shí)我們要在項(xiàng)目文件blog下創(chuàng)建babel配置文件.babelrc文件，要想babel運(yùn)行必須創(chuàng)建它，并添加如下內(nèi)容：
{
"presets": [
"react",
"es2015"
],
"env": {
"dev": {
"plugins": [
[
"react-transform",
{
"transforms": [
{
"transform": "react-transform-hmr",
"imports": [
"react"
],
"locals": [
"module"
]
}
]
}
]
]
}
}
}
}
至此，再執(zhí)行npm run server，頁(yè)面就可以正常顯示了。
