项目简介：
该项目主要是对npm指令和webpack的简单入门，以及对react的基本知识点的灵活运用。接下来将先普及知识点，然后从实验入手，详细记录该项目的操作流程。
本节实验主要是手动打包，熟悉webpack这个流程。
相关知识简介：
1.webpack
webpack是一个前端资源加载、打包工具，前端常用资源都可以作为一个模块导出，我们在代码中直接引用即可，最后按照我们的配置把代码打包整合起来。
webpack的配置信息（最简单的例子）：
Module.exports = {
entry: ‘./entry.js’, 入口文件(作用是：将入口文件告诉webpack后，webpack从入口文件入手，分析所有的require依赖，把所有的资源整合回来，打成一个包)
output:{ 输出（作用：告诉webpack最后生成的包文件所放的位置,定义path文件夹，定义filename文件名）
path:’./dist’,
filename:’bundle.js’
}，
module:{
loaders:[
{
test:/.js[x]?.$/, 正则匹配文件名js或者jsx结尾的
loader:[‘babel’] 前端js或者jsx资源
},
{
test:/.css$/, 正则匹配所有以css结尾的
loaders:”style!css” 前端css资源
}
]
}
}
2.package.json文件
代码分析都需要从package.json入手。package.json里面有如下的配置信息：
- name: 系统的名称
- version:系统的版本
- description:系统的说明
- scripts:代表怎么去运行这个系统
- dependencies:系统开发中所需要的代码级别依赖
- devDependencies:系统运行的时候所需要的依赖
此外需要注意的是：
webpack.json.js 里面存放的是一些配置说明
app文件夹下放主要代码
dist文件夹是最后产出的文件，其中存放的就是html+css加上静态资源
具体环境的搭建步骤如下：
1.创建一个空文件夹名为react-music-player
2.创建并配置package.json
2.1创建package.json
通过在命令行输入 npm-init指令
2.2基本信息的配置
-
-
- 设置name（项目名称） ,version（默认版本号）,description（项目描述）的具体内容
- 设置entry point（入口文件）为app/index.js
- 由于不需要添加测试案例，所以直接跳过test command
- git repository:如果项目在git上，直接输入git的地址，否则跳过
- 设置keywords（项目关键词）
- 设置author：自己的名字
- 设置license
-
2.3 dependencies的安装
dependencies的安装，我们通过npm工具，无需手动敲。需要注意的是：
-
-
- npm install react --save，表示安装以后依赖自动写入dependencies中
- 依赖信息：“react:’”^15.6.1””, 其中^15.6.1表示的是版本信息
- npm install语句做了哪些事情？ npm 此时会去找到 package.json中的所有依赖，然后一一安装到node_modules下面。例如：从git中下载的项目是没有node_modules这个文件夹的，需要我们通过npm install指令去自动生成这个文件夹, 然后将依赖放到这个文件夹下面
-
3.配置webpack
3.1新建一个名为webpack.config.js的文件（这是webpack中默认的配置文件名）
3.2配置entry 和output
3.3新建dist, app文件夹，以及index.js入口文件
3.4index.js文件内容的填充
webpack帮我们进行资源的导入，包括用npm安装的一些依赖模块。假设我们需要导入react, var React=Require('react')
用es6语法进行导入： import React from 'react'.注意，使用npm安装的依赖项不需要写相对路径，直接写名字即可
我们这边用如下的代码先测试一下：
import React from 'react'
console.log(React.version)
3.5执行webpack进行打包
在进行webpack打包的时候你可能会遇到问题：‘./dist’ is not an absolute path?
解决方案如下：
- 引入NodeJS中的path
var path = require('path')
- 使用path.join方法或者path.resolve方法来创建一个绝对路径 webpack.config.js文件
var path = require('path');
module.exports={
entry:path.join(__dirname,'app','index.js'),
output:{
path: path.join(__dirname,'/dist'),
filename: 'bundle.js'
}
}
3.6新建一个html文件，将刚刚打包的文件进入进来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First React Project</title>
</head>
<body>
<script type="text/javascript" src='../dist/bundle.js'></script>
<div>
Hello
</div>
</body>
</html>
3.7配置loader（webpack.config.js文件）——需要注意的是这些都需要通过npm 去安装
常用的loader有以下三个：
Babel-loader(将ES6语法转为ES5)
css-loader
less-loader
具体可以参阅：http://webpack.github.io/docs/using-loaders.html
module:{
loaders:[
{
test:/.js$/, //test表示匹配的文件，正则表达式式的意思就是匹配所有以.js结尾的文件，也就是所有的js文件，webpack都会用babel去处理
exclude:/node_modules/, //exclude表示哪些文件不需要处理，例如npm里面安装的node_modules依赖库
loader:"babel-loader", //loader的内容是"babel-loader"
query:{
presets:['react','es2015']
}
},
{ //告诉webpack如何处理css文件
test:/.css$/,
loader:"style!css"
},
{ //告诉webpack如何处理less文件
test:/.less$/,
loader:"style-loader!css-loader!less-loader"
}
]
},