034_webpack中的加载器

1. 通过loader打包非js模块

1.1. 在实际开发中, webpack默认只能打包处理以.js后缀名结尾的模块, 其它非.js后缀名结尾的模块, webpack默认处理不了, 需要调用loader加载器才可以正常打包, 否则会报错。

1.2. loader加载器可以协助webpack打包处理特定的文件模块, 比如:

• less-loader可以打包处理.less相关的文件
• sass-loader可以打包处理.scss相关的文件
• url-loader可以打包处理css中与url路径相关的文件

1.3. loader的调用过程

2. 打包处理css文件

2.1. 在终端运行: npm install style-loader css-loader -D命令, 安装处理css文件的loader。

 

2.2. 在webpack.config.js的module——>rules数组中, 添加loader规则如下: 

2.3. 其中, test表示匹配的文件类型, use表示对应要调用的loader。

2.4. use数组中指定的loader顺序是固定的, 多个loader的调用顺序是从后往前调用。

2.5. 在src目录下新建css目录, 在该目录下创建index.css

 2.6. 在index.js中导入index.css

2.7. 重新打包运行项目 

3. 打包处理less文件

3.1. 在终端运行: npm install less-loader less -D命令, 安装处理less文件的loader。

 

3.2. 在webpack.config.js的module——>rules数组中, 添加loader规则如下: 

3.3. 在src目录下新建css目录, 在该目录下创建index.less 

3.4. 在index.js中导入index.less 

3.5. 重新打包运行项目 

4. 打包处理scss文件

4.1. 在终端运行: npm install sass-loader node-sass -D命令, 安装处理scss文件的loader。

4.2. 在webpack.config.js的module——>rules数组中, 添加loader规则如下: 

4.3. 在src目录下新建css目录, 在该目录下创建index.scss 

4.4. 在index.js中导入index.scss 

4.5. 重新打包运行项目 

5. webpack5打包出的js在IE11, IE10中报错

5.1. 使用webpack5默认打包出来的js文件在IE11, IE10中报错SCRIPT1002: 语法错误main.js (9,14)。原因和babel设置无关, webpack5中默认打包出来的js文件会用ES6语法中的箭头函数, 故在IE11和IE10中引用后会报错。

 

5.2. 在webpack.config.js中配置output.environment, 告诉webpack在生成的运行时代码中可以使用哪个版本的ES特性。 

5.3. 在webpack.config.js中配置target, 告知webpack为目标(target)指定一个环境。 

5.4. 配置以上任意一个选项后, IE11, IE10不再报错。生成的main.js中的箭头函数变成如下: 

6. 配置postcss自动添加css的兼容前缀(浏览器内核标识)

6.1. 在终端运行: npm install postcss-loader autoprefixer -D命令, 安装loader。

 

6.2. 在webpack.config.js的module——>rules数组中, 添加loader规则如下: 

6.3. 在项目根目录中, 创建postcss配置文件postcss.config.js并初始化基本配置如下: 

6.4. 在index.html中添加输入框, 使用placeholder属性 

6.5. 使用伪元素选择器给输入框提示文字添加颜色, 该选择器浏览器不兼容, 需要添加浏览器内核标识 

6.6. 重新打包, 运行项目, chrome浏览器 

6.7. IE11浏览器 

7. 打包处理js文件中的高级语法

7.1. 安装babel转换器相关的包: npm install babel-loader @babel/core @babel/runtime -D

7.2. 安装babel语法插件相关的包: npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D 

7.3. 在项目根目录中, 创建babel配置文件babel.config.js并初始化基本配置如下: 

7.4. 在webpack.config.js的module——>rules数组中, 添加loader规则, exclude为排除项, 表示babel-loader不需要处理node_modules中的js文件。 

7.5. 在index.js中使用类 

7.6. 重新打包, 运行项目, IE11浏览器 

8. 打包样式表中的图片

8.1. 使用webpack5的Asset Modules，可以轻松的将图片打入我们的系统中，配置webpack.config.js。

 8.2. 在index.html中添加div, id为bg

8.3. 在src目录下添加images目录, 存放两张图片 

8.4. 在index.css中使用背景图片 

8.5. 在index.html中直接使用图片 

8.6. 打包运行 

9. Vue单文件组件

9.1. Vue单文件组件的组成结构

9.1.1. template组件的模板区域

9.1.2. script业务逻辑区域

9.1.3. style样式区域

9.1.3. 在src目录下创建components目录, 然后在该目录下创建app.vue

9.2. webpack中配置vue组件的加载器

9.2.1. 在终端运行: npm install vue-loader vue-template-compiler -D命令, 添加相关loader

9.2.2. 在webpack.config.js配置文件中, 添加vue-loader和插件  

9.3. 在webpack项目中使用vue

9.3.1. 在终端运行: npm install vue -S命令安装vue

9.3.2. 在index.html中添加vue控制的页面区域 

9.3.3. 创建vue实例, 指定渲染区域进行渲染 

 

9.4. 打包运行