～创建项目
命令行手动创建文件 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模块)热更新你的代码