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. 打包运行

034_webpack中的加载器相关推荐

webpack 中的加载器简介||webpack 中加载器的基本使用——1. 打包处理 css 文件 2. 打包处理 less 文件 3.打包处理 scss 文件
webpack 中的加载器 1. 通过 loader 打包非 js 模块在实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块,其他非 .js 后缀名结尾的模块, webpa ...
webpack中loader加载器(打包非js模块)
通过loader打包非js模块我这儿用VScode为编辑器在实际开发过程中,webpack默认只能打包处理以.js后缀名结尾的模块,其他非. js后缀名结尾的模块,webpack 默认处理不了, ...
在计算机系统中使用加载器,在个人计算机系统中从软盘加载基本输入/输出系统的设备和方法...
主权项: 一种从通常接有硬文件的个人计算机系统的软盘驱动器含有的\r\r\r\r\n软盘介质中加载BIOS的设备,该个人计算机系统具有系统\r\r\r\r\n处理器.只读存储器.随机存取存储器和软盘驱 ...
安卓开发中布局加载器(LayoutInflater)的使用
LayoutInflater的常见使用场景 (1)在Activity中 LayoutInflater inflater = getLayoutInflater(); View view = infla ...
webpack中loader加载器配置postCss自动添加CSS兼容前缀
配置postCSS自动添加css的兼容前缀前言在这里我使用VScode为编辑器 html文件中 <!DOCTYPE html> <html lang="en" ...
Activity中加载器的总结
继续总结加载器加载器可以支持在Activity或片段中异步加载数据,加载器具有以下特征: 可用于每个Activity和Fragment: 支持异步加载数据: 监控其数据源并在内容变化时传递新结果: ...
webpack-loader（加载器）
加载器是用于资源文件的转换. 加载器就是以资源文件作为入参并返回新的资源的函数(在Node.js中运行). 例子例如,您可以使用加载器告诉webpack加载CSS文件或TypeScript文件,并将 ...
操作系统的（program）loader（程序加载器）
在计算机科学中,加载器(也叫程序加载器)属于操作系统的一部分,用于加载程序(programs)和库(libraries).加载器是执行程序和代码必不可少的组件,正是它负责将程序送入内存,为程序的运行提 ...
webpack项目安装与加载器常出现问题
项目名为webpack,直接报错,在package.json里面把名字修改 TypeError: this.getOptions is not a function版本过高,得安装低版本的打包jqu ...

034_webpack中的加载器

034_webpack中的加载器相关推荐

最新文章

热门文章