首页 > 其他分享> 文章详细

webpack中的loader

2022-09-03 20:00:17 阅读：213 来源： 互联网

标签：处理 js webpack css loader 打包

1.loader概述

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

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

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

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

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

2.loader处理流程

3.打包处理CSS文件

　　1.运行 npm i style-loader@3.0.0 css-loader@5.2.6 -D

　　2.在webpack.gonfig.js的module->rules数组中，添加loader规则如下：

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

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

　　注意：

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

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

　　1.webpack默认只能打包处理.js文件，处理不了其它的后缀的文件

　　2.由于代码中包含了index.css这个文件，因此webpack默认处理不了

　　3.当webpack发现某个文件处理不了的时候，会查找webpack.config.js这个文件

　　看module.rules数组中，是否配置了loader

　　4.webpack把index.css这个文件，先转交给最后一个loader进行处理（先交给css-loader）

　　5.当css-loader处理完毕后，会把处理的结果，转交给下一个loader(转交给style-loader)

　　6.当style-loader处理完毕之后，发现没有下一个loader了，于是就把处理的结果，转交给　　　　　　　　　　　　　　webpack

　　7.webpack把style-loader处理的结果，合并到/dist/bundle.js中，最终生成打包好的文件

4.打包处理less文件

　　1.运行 npm i less-loader@10.0.1 less@4.1.1 -D 命令

　　2.在webpack.config.js的module数组中，添加loader规则如下：

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

5.打包处理样式表中url路径相关的文件

　　1.运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D 命令

　　2.在webpack.config.js的module->rules数组中，添加loader规则如下：

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

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

　　limit用来指定图片的大小，单位是字节（byte)

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

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

webpack只能打包处理一部分高级的JavaScript语法。对于那些webpack无法处理的高级JS语法，需要借助于babel-loader进行打包处理。例如webpack无法处理下面的JavaScript代码：

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

//3.为Person类应用info装饰器
@info
class Person{}

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

　　1.安装babel-loader相关的包

　　运行如下命令安装对应的依赖包

　　npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

　　在webpack.config.js的module->rules数组中添加如下规则：

//注意：必须使用exclude指定排除项，因为node_modules目录下的第三方包不需要被打包
{test:/\.js$/,use:babel:loader',exclude:/node_modules/}

　　2.配置babel-loader

　　在根目录下，创建名为babel.config.js的配置文件，定义Babel的配置项如下：

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

标签：处理,js,webpack,css,loader,打包
来源： https://www.cnblogs.com/funkyd/p/16648551.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

webpack中的loader