～创建项目(本来是为了写一个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/