webpack+react環境搭建與hello world

Mooooon發表於2017-12-14
WebReact

週末呆了兩天星巴克，通讀了一遍react以及部分npm，webpack的文件，終於可以給一些像我一樣被前端雜亂的工具搞得很迷茫的同學寫一個webpack+react的新手教程了。

準備工作

現在前端的東西太雜亂，必須有一條清晰的路線，一步步來。

這個週末我的學習步驟是這樣的

  1. 安裝node，讀一遍npm getting start部分的文件，這樣你就知道npm install以後發生了什麼，知道package.json到底配置了什麼。知道node是如何管理、載入依賴。
  2. 讀了js good parts的物件、函式、繼承三章
  3. 讀ruanyf老師es6 class部分
  4. 讀webpack的tutorial

以上這幾步做好了，就可以很快看懂下面的教程了

webpack＋react hello world

github上有搭建好的專案環境可以參考，如果覺得對你有幫助，歡迎star哦

npm install 以後執行 webpack-dev-server，就可以在localhost:8080看到效果了

正式開始

STEP1 安裝依賴

首先新建一個資料夾，裡面的目錄結構大致是這樣子

├── app
│   ├── components
│   │   └── app.js
│   └── index.js
├── index.html
├── package.json
└── webpack.config.js
複製程式碼

然後，我們需要使用npm安裝一些依賴與工具

npm install --save react react-dom lodash 安裝公共的包

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react react-hot-loader style-loader css-loader webpack webpack-dev-server 開發環境需要用到的包

這兩條命令裡的--save和--save-dev參數列示在下載包的同時，更新package.json檔案的內容，這樣其他人拿到這個專案，只需要執行npm install就可以安裝齊依賴了。不必執行上面兩條命令。

執行完後，你的package.json裡會包含如下的內容

  "dependencies": {
    "lodash": "^4.17.2",
    "react": "^15.4.1",
    "react-dom": "^15.4.1"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.26.1",
    "react-hot-loader": "^1.3.1",
    "style-loader": "^0.13.1",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }

複製程式碼

這裡簡單介紹一下各個包的作用

  • lodash可以理解為加強版underscore，一個方便的工具庫
  • react 和 react-dom就是react相關的庫
  • webpack是打包工具，webpack-dev-server是我們開發環境的伺服器
  • babel相關的包可用理解成js的翻譯器，讓你提前用上es6，jsx這樣的語法，由babel幫你翻譯成es5，從而在瀏覽器中執行

STEP2 配置webpack

編輯webpack.config.js,寫入如下內容

var webpack = require("webpack") 
var path = require("path")

module.exports = {
 devtool: "inline-source-map",
 entry: [
  "webpack-dev-server/client?http://127.0.0.1:8080/",
  "webpack/hot/only-dev-server",
  "./app"
 ],

 output: {
  path: path.join(__dirname, "public"),
  filename: "bundle.js"
 },
 resolve: {
  modulesDirectories: ["node_modules", "app"],
  extensions: ["", ".js"]
 },
 module: {
  loaders: [
   {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loaders: ["react-hot", "babel?presets[]=react,presets[]=es2015"]
   },
   {
    test: /\.css?$/,
    exclude: /node_modules/,
    loaders: ["style", "css"]
   }
  ]
 },
 plugins: [
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoErrorsPlugin()
 ]
}
複製程式碼

這個配置檔案涉及webpack本身以及webpack-dev-server的配置 各個配置項的目的，可以查閱webpack官方文件

STEP3 程式碼

index.html,非常簡單，定義了一個react元件的mountNode app，以及載入我們通過webpack build出來的bundle.js


<!DOCTYPE html>
<html>
<head>
    <title>React Hello World</title>
</head>
<body>
    <div id="app" />
    <script src="bundle.js"></script>
</body>
</html>
複製程式碼

app/index.js, import react相關的庫以及我們自定義的，名叫App元件

import React from 'react'
import {render} from 'react-dom'
import App from 'components/app'

render(<App />, document.getElementById('app'))
複製程式碼

app/components/app.js 定義了App元件並export它

import React from "react"

class App extends React.Component {

	render(){
		return(
			<div><h1>Hello React+Webpack</h1></div>
			)
	}
}

export default App
複製程式碼

大功告成

執行webpack-dev-server，如果提示找不到webpack命令，可以執行node_modules/webpack-dev-server/bin/webpack-dev-server.js

不出意外，訪問http://localhost:8080就可以在瀏覽器中看到效果了

webpack+react環境搭建與hello world

相關文章