亚信第一天 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




原文地址:https://www.cnblogs.com/cndotabestdota/p/6856544.html