webpack入门03
1，创建webpack项目
2，npm初始化
3，安装webpack
4，创建其他目录和文件
--src：源文件目录
--componets：组件目录
--layer：组件layer目录
--layer.html
--layer.js
--layer.less
--css：公用的样式文件
--common.css
--assets：图片资源目录
--app.js
--dist：打包后静态资源目录
--index.html
--package.json
--webpack.config.js
5，案例1：
- webpack.config.js：定义文件入口，出口和模板
- app.js文件：引用layer模块
- 定义组件相关文件：layer.html，layer.less，layer.js
6，babel加载器应用
- 下载babel-loader包含babel-loader，babel-core（babel加载器将ES6转换成浏览器能解析的语法）
- 下载babel插件：babel-preset-latest（babel插件用于将模块打包成指定版本）
- preset插件配置方式一：webpack.config.js
- preset插件配置方式二：package.json
- loader加载器参数
include：指定要转换的模块的目录，exclude：指定不要转换的模块的目录
include和exclude还可以配置绝对路径：
7，CSS加载器应用
- 安装加载器：style-loader，css-loader
- 给common.css添加样式
- 将common.js导入到app.js文件中
- 在webpack.config.js中配置加载css加载器
7.1，postcss-loader（css加前缀）
- 安装postcss-loader插件
- 在webpack.config.js配置postcss-loader，使其打包时自动增加浏览器前缀
- 若css采用@import方式引用css文件，那么这个引用的文件并不会经过postcss-loader
- 通过postcss-loader参数：importLoaders可以设置，使所有css文件按顺序经过：postcss-》css-loader-》style-loader处理
7.2，less-loader（处理less）
- 安装less-loader
- 配置webpack.config.js
- 编写用例
7.3，sass-loader（处理scss）
8，处理模板文件
8.1 模板时html语法
- html-loader能够将layer.html作为模板字符串，在js中进行处理
- 配置webpack.config.js
- 在layer.js导入layer.html，使layer.html能够作为字符串传递给其他模块
- 在主页面中定义好layer要插入到位置
- 在入口文件中引用layer组件模块，拿到layer组件的模板，将其插入到主页面中
- 结果：layer组件成功插入到了index.html页面中
8 .2 模板是ejs语法
- 处理ejs模板需要使用ejs-loader
- 配置webpack.config.js
- 使用ejs语法编写layer组件模板
- 在layer组件的js中引入模板，引入的模板返回的是一个方法（tpl）
- 入口文件引用layer组件，并向组件传如参数
- 结果：index.html页面将根据传递的参数显示layer组件
9，图片处理
9.1 file-loader
- file-loader能根据相对路径生成图片的路径（css文件，html文件）
- 配置webpack.config.js
- 在css，html文件中引用图片
- 结果：css，html文件将生成的文件路径自动转换到代码中
- 若在组件的模板文件中使用相对路径引用图片，那么当主页面引用组件是，图片路径不会自动转换，导致图片无法正常显示，需要使用${require(image_path)}，如下：
结果：使用上面方式后，组件中的图片才能正常显示
- 通过以下方式配置webpack.config.js的file-loader组件query参数，能够指定生成的图片的位置和文件名，如下（assets目录中，文件名为图片原名-5位哈希值.后缀）
9.2 url-loader
- url-loader能根据相对路径生成文件路径，且能根据图片大小生成url方式引用的文件，和database64格式的图片数据
- 配置webpackconfig.js
- 结果：url-loader限制图片大小为20000kb，小于这个值的图片不会重新打包，而是将图片数据打包到js和html文件中，所以打包结果只生成两个文件，且这两个文件的大小也增大了。
9.3 image-webpack-loader
- 结合file-loader，或url-loader使用，能够对图片进行压缩
- 配置webpack.config.js，image-webpack放置url-loader后，先压缩，再打包
结果：经过压缩后，图片的大小只有7.07kb，并且生成在assets目录中
加载器使用方式
- 在脚本的require中使用
- 通过CLI命令使用
- 通过配置文件webpack.config.js使用
