～創建項目(本來是爲了寫一個react全家桶demo，由於太長了，就拆出來了，項目名懶得改了)
命令行手動創建文件 mkdir react-family-demo
進入文件 cd react-family-demo 此時文件夾是空的
初始化：手動創建或用命令：npm init 創建package.json文件：該文件用於定義所有項目所需的模塊、項目的配置信息和運行環境，npm install命令將根據這個配置文件下載相應的模塊
這些選項中只有名稱name和項目版本version是必填的，其他都是選填的
其中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>
安裝loader：webpack 自身只支持 JavaScript。而 loader 能夠讓 webpack 處理那些非 JavaScript 文件，並且先將它們轉換爲有效模塊，然後添加到依賴圖中，這樣就可以提供給應用程序使用。要使用的依賴提前下載：例如用webpack加載css文件，需要css-loader:npm install --save-dev css-loader
//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:'/build'在打包時提示錯誤，加上__dirname打包成功
path:__dirname+'/build',
},
// 開發模式
mode:'development',
//loader：webpack 自身只支持 JavaScript。而 loader 能夠讓 webpack 處理那些非 JavaScript 文件，並且先將它們轉換爲有效模塊，然後添加到依賴圖中，這樣就可以提供給應用程序使用
module:{
//rules數組指定多個loader
rules: [
//最簡單的形式，包含兩個必須屬性
{
// 匹配條件：test指明在打包之前，遇到這個的時候要使用loader
test:/\.css$/,
//use 指明要用哪個loader轉換一下
use:'css-loader'
},
//可以使用數組類型的use指定loaders列表，支持鏈式傳遞：loader 鏈中每個 loader，都對前一個 loader 處理後的資源進行轉換
{
test: /\.css$/,
use:[
{
loader:'style-loader'
},
{
loader:'css-loader',
}
]
}
]
}
}
打包：命令行執行webpack
成功：在build文件夾下出現bundle.js
搭建前端服務器：使用webpack-dev-server 安裝：npm install webpack-dev-server --save-dev
運行：在項目下直接運行webpack-dev-server，如果順利應該會出現這個樣子
訪問:瀏覽器打開http://localhost:8080/