【Vue】1-3、Webpack 中的 loader

一、概述

在实际开发过程中,webpack 默认只能打包处理以 .js 后缀结尾的模块。

其他的非 .js 后缀名结尾的模块 webpack 默认处理不了,需要调用 loader 加载器才可以正常打包,否则会报错!

loader 加载器的作用:协助 webpack 打包处理特定的文件模块。

  • css-loader 可以打包处理 .css 相关文件

  • less-loader 可以打包处理 .less 相关文件

  • babel-loader 可以打包处理 webpack 无法处理的高级 js 语法

二、打包处理 css 文件 

步骤:

1)运行 npm install [email protected] [email protected] -D 命令,安装处理 css 文件的 loader

2)在 webpack.config.jsmodule -> rules 数组中,添加 loader 规则如下:

module:{	// 所有第三方文件模块的匹配规则
	rules: [	// 文件后缀名的匹配规则
		{
			test:/\.css$/,
			use:['style-loader','css-loader']
		}
	]
}

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

注意:

use 数组中指定的 loader 顺序是固定的

多个 loader 的调用顺序是:从后往前调用

 

三、打包处理 less 文件 

步骤:

1)运行 npm install [email protected] [email protected] -D 命令

2)在 webpack.config.jsmodule -> rules 数组中,添加 loader 规则如下:

module:{	// 所有第三方文件模块的匹配规则
	rules: [	// 文件后缀名的匹配规则
		{
			test:/\.less$/, 
            use:['style-loader','css-loader','less-loader']
		}
	]
}

 

四、打包处理样式表中与 url 路径相关的文件  

步骤:

1)运行 npm install [email protected] [email protected] -D 命令

2)在 webpack.config.jsmodule -> rules 数组中,添加 loader 规则如下:

module:{	// 所有第三方文件模块的匹配规则
	rules: [	// 文件后缀名的匹配规则
		{
			test:/\.jpg|png|gif$/, 
            use:['url-loader?limit=22229']
		}
	]
}

其中 之后的是 loader 的参数项:

  • limit 用来指定图片的大小,单位是字节(byte

  • 只有 <= limit 大小的图片,才会被转为 base64 格式的图片

 

五、打包处理 js 文件中的高级语法  

webpack 只能打包处理 一部分高级的 JavaScript 语法。

对于那些 webpack 无法处理的高级 js 语法,需要借助于 babel-loader 进行打包处理。

例如 webpack 无法处理下面的 JavaScript 代码:

 

// 定义了名为 info 的装饰器
function info(target){
	// 为目标添加静态属性 info
	target.info = 'Person info.'
}
// 为 Person 类应用 info 装饰器
@info
class Person{}

// 打印 Person 的静态属性info
console.log(Person.info)

步骤:

1)运行 npm install [email protected] @babel/[email protected] @babel/[email protected] -D 命令

2)在 webpack.config.jsmodule -> rules 数组中,添加 loader 规则如下:

module:{	// 所有第三方文件模块的匹配规则
	rules: [	// 文件后缀名的匹配规则
		{
			test:/\.js$/, 
            use:'babel-loader',
            exclude:/node_modules/
		}
	]
}

3)在项目根目录下,创建名为 babel.config.js 的配置文件,定义 Babel 的配置项如下:  

module.exports = {
	// 声明 babel 可用的插件
	plugins:[
        [
            '@babel/plugin-proposal-decorators',
            {
                legacy: true
            }
        ]
    ]
}

 Babel官网:https://babeljs.io/dosc

一  叶  知  秋,奥  妙  玄  心 

你可能感兴趣的:(Vue,vue.js,webpack,前端)