亚信第一天 5-15

webpack 入门教程 http://www.jianshu.com/p/4df92c335617

 

整体目录结构
lib - 使用nodejs laydate
git
.bat 安装脚本 打包
.sh
page.json 整体配置
server.js 开发服务器配置

webpack-模块化划分及代码组织

使用npm自动化管理
npm的使用 - node的包管理工具
www.npmjs.com

package.json - 进行配置管理
内容是一段json数据：main-入口文件

server.js - 配置发布接口和本地测试接口
主要配置：webpack-dev-server

npm install
npm start

babel 作用？
-core
-loader
-preset-es2015
-preset-react
-css-loader webpack加载器，用来处理css代码
-echarts
-exports-loader 处理不符合commonjs的代码


使用webpack
各种插件的作用？
UglifyJsPlugin
CommonsChunkPlugin
CleanWebpackPlugin文件的清理

entry的配置：配置入口文件/模块
resolve：解析
extensions-引用 js jsx
alias：别名，引用一些其他模块，将路径用一个别名替代映射。如第三方的laydate
output：配置输出
打包到什么路径，打包成什么名称
chunkhash-前端静态资源发布的一种解决方案

loaders：处理各种资源，css js jsx 图片
test-检测哪些文件
babelLoaderHot-热插拔，代码中有修改，直接在页面中呈现
urlLoader - 图片处理 iamge会向后端请求，所以压缩成base64了。
大于一定阀值的图片才向后端请求
exportLoader - 处理一些老的第三方组件

plugins：web的处理，代码的压缩 混淆
UglifyJsPlugin-
ExtractTextPlugin-
definePlugin-判断当前所处环境

=========================================
组件：
datagrid中分页引用的就是pagetool