webpack 配置 loader

打包处理css文件

1、运行 npm i style-loader@3.0.0 css-loader@5.2.6 -D 命令，安装处理css文件

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

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

test：匹配的文件类型，use：调用的loader，顺序是固定的
多个loader的调用顺序是：从后往前调用

//1.使用ES6导入语法，导入jquery
import $ from 'jquery'

//导入样式（在webpack中，一切皆为模块）
import './css/index.css'

1. webpack默认只能打包处理.js结尾的文件。
2. webpack默认处理不了index.css文件。
3. 当webpack发现处理不了文件，会查找webpack.config.js配置文件，看module.rules数组中，是否配置了对应的loader加载器。
4. webpack把index.csss这个文件，先转交给最后一个loader进行处理（先转交给css-loader）。
5. 当css-loader处理完之后，交给下一个loader（转交给style-loader）,直到没有loader，将处理的结果，合并到/dis/bundle.js中，最终生成打包好的文件

 

打包处理less文件

1、运行npm i less-loader@10.0.1 less@4.1.1 -D 命令（内置依赖项）

2、同上css文件

 

小logo适合base64

 

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

1、导入图片，得到图片文件
import logo from './images.logo.jpg'  //接收到的成员为undefined时，可以省略from
2、给img标签的src动态赋值
$('.box').arr('src',logo)

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

{test:/\.jpg|png|gif$/,use:'url-loader?limit=22229&outputPath=images'},limit:限制大小（字节），只有小于的才能转为base64

多个参数之间用&分隔

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

//定义装饰器函数
function info(target) {
    target.info = 'Person.info'
}
//定义一个普通的类
@info
class Person {}

console.log(Person.info)

1、安装npm i  babel-loader@8.2.2 @babel@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}  exclude:排除项

在配置babel-loader的时候，程序员只需要把自己的代码进行转换即可，一定要排除node_modules目录中的js文件，不需要管第三方包js兼容性问题

配置babel-loader

//在项目根目录下，创建名为babel.config.js的配置文件，定义babel的配置项
module.exports = {
    //声明babel可用的插件
    plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]    //插件的插件
}