～創建項目
命令行手動創建文件 mkdir react-family-demo
進入文件 cd react-family-demo 此時文件夾是空的
初始化：手動創建或用命令：npm init 創建package.json文件：該文件用於定義所有項目所需的模塊、項目的配置信息和運行環境，npm install命令將根據這個配置文件下載相應的模塊
其中dependencies中是項目運行環境所依賴的模塊，devDependencies中是項目開發環境所依賴的模塊
此時文件下出現兩個文件，node_modules（存放所有的依賴的文件夾）和package-lock.json:(是在 `npm install`時候生成一份文件，用以記錄當前在node_modules下生成的確切樹的具體來源和版本號)
在package.json中的scripts對象中，目前只有一個test命令是在初始化的時候加上的，scripts指定了運行腳本命令的npm命令行縮寫，接下來要添加運行和打包命令，先安裝webpack
～安裝webpack: npm install webpack --save-dev
其中--save表示：該模塊安裝到當前項目中，寫入package.json文件的dependencies對象（-g表示全局安裝）
-dev表示：只在開發階段生效，寫入devDependencies中
查看安裝結果：webpack -v 出現安裝的版本，表示成功
～配置webpack：
創建：在項目根目錄下新建文件名稱爲：webpack.config.js
配置：根目錄創建src文件夾，創建入口頁面index.html，在src下創建index.js入口文件。以此配置入口、輸出
index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<title>react全家桶demo</title>
</head>
<body>
<div id="root" style="height: 100%;"></div>
<!-- 引入打包生成的bundle.js文件 -->
<script type="text/javascript" src="/build/bundle.js"></script>
</body>
</html>
index.js
document.getElementById('root').innerHTML = '哈哈哈'
安裝loader：webpack 自身只支持 JavaScript。而 loader 能夠讓 webpack 處理那些非 JavaScript 文件，並且先將它們轉換爲有效模塊，然後添加到依賴圖中，這樣就可以提供給應用程序使用。要使用的依賴提前下載：例如用webpack加載css文件，需要css-loader:npm install --save-dev css-loader
配置webpack.config.js
//path是Node.js核心模塊，用於操作文件路徑
const path = require('path');
module.exports = {
//入口起點:入口起點(entry point)指示 webpack 應該使用哪個模塊，來作爲構建其內部依賴圖的開始，webpack 會找出有哪些模塊和 library 是入口起點（直接和間接）依賴的。默認值是 ./src/index.js；
//入口起點可以有多個
entry:'./src/index.js',
//輸出:output 屬性告訴 webpack 在哪裏輸出它所創建的 bundles，以及如何命名這些文件，主輸出文件默認爲 ./dist/main.js，其他生成文件的默認輸出目錄是 ./dist。
//輸出只能有一個
//最簡單的配置就是隻包含名字和路徑
output:{
//生成文件的名字
filename:'bundle.js',
//打包輸出到哪裏 直接寫path:'/public'在打包時提示錯誤，加上__dirname打包成功
path:__dirname+'/public' , //絕對路徑
},
// 開發模式
mode:'development',
//loader：webpack 自身只支持 JavaScript。而 loader 能夠讓 webpack 處理那些非 JavaScript 文件，並且先將它們轉換爲有效模塊，然後添加到依賴圖中，這樣就可以提供給應用程序使用
module:{
//rules數組指定多個loader
rules: [
//最簡單的形式，包含兩個必須屬性:test/use
//可以使用數組類型的use指定loaders列表，支持鏈式傳遞：loader 鏈中每個 loader，都對前一個 loader 處理後的資源進行轉換
{
// 匹配條件：test指明在打包之前，遇到這個的時候要使用loader
test: /\.css$/,
//use 指明要用哪個loader轉換一下
use:[
{
loader:'style-loader'
},
{
loader:'css-loader',
}
]
}
]
},
devServer:{
open:true,//打開瀏覽器，默認不打開
port:3000,//端口號設置，默認8080
host:"127.0.0.1", //設置服務器的主機號
/*
contentBase 指定了服務器從哪個目錄中提供內容，如果不寫入，默認是執行webpack-dev-server的當前目錄，所以一般就會是項目根目錄啦～
通過webpack打包出來的文件在public下，通過webpack-dev-server輸出的文件在內存裏，不輸出真實的文件
沒寫入時提示找不到bundle.js文件是因爲在index.html中引入時的路徑爲‘./bundle.js’，寫入後相當於把bundle.js文件“放在了”public文件夾下，所以能找到了，注意：理解“放在了”，不是真的放在
推薦使用絕對路徑 也可以在在package.json中的cli命令中使用，例如："webpack-dev-server --content-base /public"
*/
contentBase: path.join(__dirname,"public") ,
/*
devServer:hot 模塊熱替換
注意：必須有 webpack.HotModuleReplacementPlugin 才能完全啓用 HMR。
如果 webpack 或 webpack-dev-server 是通過 --hot 選項啓動的，那麼這個插件會被自動添加，所以你可能不需要把它添加到 webpack.config.js 中
*/
// hot:true,
},
plugins:[
// new webpack.HotModuleReplacementPlugin(),//熱加載插件
]
}
打包：命令行執行webpack
成功：在build文件夾下出現bundle.js
搭建前端服務器：使用webpack-dev-server 安裝：npm install webpack-dev-server --save-dev
運行：在項目下直接運行webpack-dev-server，如果順利應該會出現這個樣子
...省略代碼...
+ 73 hidden modules
ℹ ｢wdm｣: Compiled successfully.
訪問:瀏覽器打開http://localhost:8080/ 可以看到‘哈哈哈’
這裏沒有使用插件而是直接把熱更新寫入編譯命令裏--hot，
package.json
"scripts": {
"test": "test",
"build": "webpack",
"start": "webpack-dev-server --config webpack.config.js --hot"
},
現在可以直接使用npm run start
控制檯信息：
[HMR] Waiting for update signal from WDS...
client:71 [WDS] Hot Module Replacement enabled.
表示由WDS(webpack-dev-server模塊)熱更新你的代碼