webpack4從零配置搭建簡單的React16開發環境
寫在最前
暑假想要學習React, 發現React官網上的沒有說明如何搭建React開發環境, 網上找的很多都是基於webpack3的, 或者直接使用腳手架, 所以趁著放假, 就稍微學了下webpack, 開始搭建自己的React項目. 第一次寫博客, 如有錯誤, 請指出, 謝謝!
之後也會繼續更新從零搭建React全家桶系列, react+react-router+redux+es6. 希望大家多多支持.
說明
- 開發環境是windows 10
- 技術棧版本
- node 10.3.0
- npm 6.1.0
- webpack 4.16.1
- react 16.4.1
- babel-core 6.26.3
- babel-loader 7.1.5
- babel-preset-env 1.7.0
- babel-preset-react 6.24.1
初始化項目
- 創建文件夾並進入
mkdir react-start&& cd react-start
-
初始化package.json文件
npm init -y
-y的意思是按照默認的填寫
webpack
- 安裝webpack
npm i webpack webpack-cli -D
-D的意思是保存到開發依賴中
在webpack4中, 需要同時安裝webpack和webpack-cli, 因為兩者在webpack4中分開管理了
- 新建webpack開發配置文件
touch webpack.config.js
webpack.config.js
const path = require(‘path‘); module.exports = { // 入口文件 entry: { app: ‘./src/index.js‘ }, // 輸出到dist文件夾, 文件名字為bundle.js output: { filename: ‘bundle.js‘, path: path.resolve(__dirname,‘./dist‘) } }
- 新建src目錄然後在裏面新建index.js文件
mkdir src && cd src && touch index.js
在index.js裏面輸入
console.log(‘Hello World!‘);
- 進入package.json文件, 在scripts裏面加入"build"
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }
- 回到根目錄, 在命令行裏輸入npm run build
npm run build
- 可以看到以下內容, 表示編譯成功
可以看到, 一個webpack命令執行了什麽呢?
官網是這樣解釋的, 如果webpack.config.js存在, 則webpack命令將默認選擇使用它.
我們也可以使用 webpack --config webpack.config.js 命令來指定配置文件
- 現在我們來測試一下,在dist文件夾裏面新建index.html
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <script src="./bundle.js"></script> </body> </html>
- 用瀏覽器打開index.html可以看到控制臺輸出了Hello World!
- 到現在為止, 我們已經完成了基本的webpack配置了.
React
- 下面我們正式開始搭建React
- 安裝react和react-dom
npm install react react-dom --save
也可以簡寫為:
npm i react react-dom -S
- 因為react中使用JSX語法, 所以我們需要 babel來編譯它
npm i babel-core babel-loader babel-preset-env babel-preset-react -D
其中babel-core是核心文件, babel6推薦使用 babel-preset-env 來對ES2015及更高版本進行轉換, babel-preset-react能夠轉換JSX語法
- 在根目錄下新建babel配置文件.babelrc
touch .babelrc
- 修改webpack.config.js, 增加babel-loader
module: { rules: [ { test: /\.(js|jsx)$/, use: ‘babel-loader‘, exclude: /node_modules/ } ] }
- 修改src文件夾裏面index.js
import React, { Component } from ‘react‘;
import ReactDOM from ‘react-dom‘;
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementById(‘root‘)
)
- 修改dist文件夾裏面的index.html, 加上<div id="root"></div>
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="root"></div> <script src="./bundle.js"></script> </body> </html>
- 執行命令npm run build, 可以看到編譯成功
- 用瀏覽器打開index.html, 可以看到
現在, 已經成功地用webpack編譯JSX語法了
但是我們在開發中, 每次要編譯代碼時, 手動運行npm run build 會變得很麻煩, 所以我們可以使用插件來幫助我們在代碼發生變化後自動編譯代碼
使用webpack插件進行開發
- 安裝webpack-dev-server
npm i webpack-dev-server -D
- 修改webpack.config.js, 增加devServer
devServer: { port: 3000, contentBase: ‘./dist‘ }
意思是把服務器端口設為3000, 默認目錄是dist
- 修改package.json, 增加一個script腳本, 可以直接運行開發服務器
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "server": "webpack-dev-server --open" },
- 運行npm run server
npm run server
直接修改index.js裏面的內容, web 服務器就會自動重新加載編譯後的代碼
至此, 簡單的react開發環境已經搭建完成了!
代碼請看我的github: https://github.com/Ga-hou/react-start
webpack4從零配置搭建簡單的React16開發環境