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使用