Webpack
1.准备工作
安装：npm install --save-dev webpack
创建package.json：npm init
其中
-save自动把模块和版本号添加到dependencies部分
--save-dev自动把模块和版本号添加到devDependencies部分
可以省掉手动修改package.json文件的步骤
2.打包
浅：直接用webpack app/main.js public/bundle.js
深：配置并配置webpack.config.js
定义入口文件、打包后的js文件名、打包后文件的存放位置
module.exports= {
entry:__dirname+"/app/main.js",//唯一入口文件
output:{
path:__dirname+"/public",//打包文件存放的地方
filename:"bundle.js"//打包后输出的文件名
}
//__dirname指向当前执行脚本所在的目录，就是该文件所在的文件夹
}
再深：配置package.json文件，在scripts添加命令代替webpack
"scripts": {
"start":"webpack"
}
3.调试功能（生成Sources Map）
为我们提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易调试。意思就是有了它，就能通过浏览器页面找到对应的原始代码的地方，找到以后调试就好了。
咋用呢：在chrome浏览器调出调试窗口，右键add folder to workspace，找到需要调试的前端根文件夹，确定。
可以直接在浏览器上修改，保存，重新打包，刷新就好了。
在webpack.config.js里添加配置项
devtool:'eval-source-map',
source-map
在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包文件的构建速度；
cheap-module-source-map
在一个单独的文件中生成一个不带列映射的map，只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便；
eval-source-map
同一个文件中生成完整的source map。不影响构建速度，对打包的JS文件的执行具有性能和安全的隐患。只能用在开发阶段；
cheap-module-eval-source-map
生成source map最快，生成的Source Map会和打包后的JavaScript文件同行显示，和eval-source-map选项具有相似的缺点；
4.构建本地服务器
实现功能：浏览器检测代码修改并自动刷新。基于node.js的单独组件，需要依赖。这个功能必须要开启本地服务器才能好用。
安装：npm install --save-dev webpack-dev-server
配置：（webpack.config.js）
devServer:{
contentBase:"./public",//本地服务器所加载的页面所在的目录
colors:true,//终端中输出结果为彩色
historyApiFallback:true,//不跳转,适用于单页面，所有跳转指向index.html
inline:true,//实时刷新
port:"8080"//检测端口，如果省略，则默认为8080}
5.Loaders
通过loader可以时各种各样的代码转换为浏览器可读的JS代码。
Loaders需要单独安装，并在webpack.config.js里的modules关键字下进行配置。
test：一个匹配loaders所处理的文件的拓展名的正则表达式（必须）
loader：loader的名称（必须）
include/exclude：手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
query：为loaders提供额外的设置选项（可选）
module:{
loaders:[
{
test:/\.json$/,
loader:"json-loader"
}
]
}
6.Babel
实现功能：将ES6、ES7转化成浏览器可读的ES5，使用基于js扩展的语言，比如React的JSX
Babel是几个模块化的包，核心功能位于babel-core中，用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包
安装与配置：
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
安装之后，就可以使用jsx和ES6的语法了。
Babel配置文件.babelrc。
实现功能：简化webpack.config.js
在根目录创建，文件名为.babelrc.
JSON，内部是query的信息键值对
7.一切皆模块
处理样式表需要连个loader，css-loader实现功能和style-loader插入页面。
安装：npm install --save-dev css-loader style-loader
配置：
{
test:/\.css$/,
loader:"style-loader!css-loader"
//感叹号的作用在于使同一文件能够使用不同的loader
}
要用哪个文件必须的先导入。。。不然谁知道你要用谁啊
import'./main.css';// ./表示当前文件夹
一般情况下，css和JS会被打包到同一个文件夹，可以通过配置把css打包成单独的文件夹。
配置：
{test:/\.css$/,
loader:"style-loader!css-loader?modules"
//感叹号的作用在于使同一文件能够使用不同的loader}
import styles from './Greeter.css';//导入
8.css预处理器
首先安装postcss-loader和autoprefixer（自动添加前缀的插件）
npm install --save-dev postcss-loader autoprefixer
配置：
[...
{
test: /\.css$/,
loader: 'style!css?modules!postcss'
}
],
postcss: [
require('autoprefixer')//调用autoprefixer插件
]