1.新建專案資料夾

2.cmd進入資料夾 輸入指令

cnpm init

注：事先配置了淘寶映象源

此時專案目錄下會建立一個package.json

3.在專案中安裝webpack和webpack-cli和webpack-dev-server

cmd下輸入

cnpm install webpack webpack-cli webpack-dev-server --save

4.在專案檔案目錄下新建index.html，新建資料夾src，在src中新建檔案index.js

注：webpack4預設入口檔案為src中的index.js，可以在webpack.config.js中修改

5.安裝react

cnpm install react react-dom
 

6.安裝babel

cnpm install [email protected] @babel/core @babel/preset-react --save

7.專案目錄下新建配置檔案webpack.config.js

配置檔案如圖

8.使用webpack打包一下

發現在專案目錄下生成了一個資料夾dist，資料夾裡生成一個檔案main.js

這是webpack4預設的打包輸出檔案，把它引入到index.html中

到這裡使用webpack4配置react環境已經完成

嘗試使用react

webpack打包

開啟index.html

實現熱載入

cmd輸入

npx webpack-dev-server --mode development --output-public-path dist
 

開啟http://localhost:8080/即可

注：8080為預設埠，可以在webpack.config.js中修改