webpack

webpack

    基于模块化开发的一个工程化开发工具，因此webpack中，任何资源（图片，css等）都可以作为模块加载进来（需要一些加载机laoder）

    这个工具的模块化的规范基于common.js的，但是也支持amd,cmd规范,凡是建议我们使用common.js规范,因此我可以像书写node一样书写项

webpacj是由react推动的（react文件都是由webpack编译的），因此react相关的demo很多都是基于webpack实现的，所有对于react的相关处理插件，webpack是最丰富的

使用webpack

  npm instal -g webpack

  webpack -v 查看版本号

使用webpack处理项目，跟gulp一样，都需要一个配置文件

配置文件 webpack.config.ks

再这个文件中定义功能

entry 定义入库文件

可以是字符串,

此时表示一个表示一个入库文件

可以是一个对象，定义多个入库文件

Key表示入库的文件名称（发布的）

Value是项目开发中的真实地址

Output 定义文件发布的位置
   值是一个对象

Path定义发布的目录，如果不定义该属性，路径可以写在filename属性中

Filename：定义成对象的时候，（此时入口文件有多个）,我们要将filename定义成[name].js

服务器

 webpack中有一个插件，提供了服务区服务，通过这个服务器，我可以预览我们的项目

webpack-dev-server

使用首先安装

npm install -g webpack-dev-server

webpack-dev-server  -v 查看版本

在我们的项目中可以通过webpack-dev-server指令,将项目发布到服务器上
提供了880的端口

在webpack中所有的资源都是可以加载的（js,css,模板文件，图片文件），加载资源，我们要在module中属性中定义这些加载配置（指定加载器）

在modlue 属性中,通过定义loaders 定义加载器

属性值是一个数组，每一个成员代表一个配置

通过test定义匹配的规则 （正则表达式）
通过loader定义加载器

可以通过，级联多个加载器；

加载css需要俩个加载器

一个是css-loader

一个是style-loader

样式文件默认加载到header里面

图片加载器

加载图片，需要图片加载器

图片加载器叫 url-loader

因此 图片加载比较体术，有俩种加载方式

一种是内联式，将图片嵌入文件内部（图片将转化成base64格式）

一种是外链式，将图片作为一个资源嵌入（通过图片路径引入图片）

再webpack中，我们可以再url-loader中顶一个limit参数，来决定采用哪种方式引入语法

url-loader？limit=2048

?是用来定义加载器的参数配置的

Limit 表示图片大小限制

2048单位是b , 所以2048比哦啊还是2kb

图片小于2kb，采用内嵌式

图片大于2kb,  采用外链式

js压缩