webpack打包第二节

解决绑定时有不同的文件 npm html-webpack-plugin --save-dev
使用方法：在webpack的配置文件中引用插件

在react中使用webpack的原因##

1、babel实时编译，速度比较慢
2、需要自己搭建服务器
3、需要测试
4、热更新

webpack安装使用
1.下载webpack
npm init                                            //初始化npm生成json文件
npm install webpack --save-dev         //webpack包
npm install -g webpack                              //webpack的cli环境
npm install -g webpack-dev-server                   //webpack自带的服务器

2.各种依赖库
#babel相关库
npm install  babel-core -D                          //后台编译babel工具
npm install babel-preset-es2015 -D                  //babel对es6的预设
npm install babel-loader -D                         //babel加载器

#webpack本身
npm install webpack -D                              //webpack本地依赖库
npm install webpack-dev-server -D                   //webpack服务器的本地依赖
npm install babel-preset-react -D                   //babel-react预设
npm install react -D                                //react本身
npm install react-dom -D                            //react-dom本身
npm install react-hot-loader -D                     //热更新

npm install style-loader -D             
npm install css-loader -D

3.webpack的配置文件
webpack.config.js                                   //webpack的配置文件
.baberc                                             //babel的预设文件

webpack.config.js文件中
module.exports={
 entry:'./index.js',                               //编译的入口地址
 output:{
  path:__dirname;                                  //编译完成的输出地址
  filename:'banbel.js'
 },
 devtool:'source-map',                             //开发工具
 module:{
  loaders:[
   {test:/\.css$/,loader:'style!css'},
   {test:/\.js$/,loader:'react-hot-loader!babel-loader',exclude:/node-modules/}
  ]
 }
}

.babel的预设文件
新建.babel文件
在.babelrc文件中
{
 presets:[['es2015'],['react']]
}

新建的HTML文件中引入bundle.js文件
bash窗口输入webpack即可编译

-D的原因是将所需要的库引入到package.json中
通过npm install 安装所有需要的库文件