css-loader，less-loader，url-loader，babel-loader的安装及其配置

   由于webpack只能打包处理以 .js 后缀名结尾的模块，需要额外的loader加载器才可以处理其他类型的文件，如.css、 .less等相关文件

安装css-loader

//默认安装最新版本
npm i style-loader css-loader -D
//指定安装版本
npm i style-loader@3.0.0 css-loader@5.2.6 -D

在webpack.config.js的module中配loader规则

module.exports = {
    mode:'development',
        module:{
        //所有第三方文件模块的匹配规则
        rules: [
            //文件后缀名的匹配规则
            {test: /\.css$/,use: ['style-loader','css-loader']}
            //test指定什么类型文件，$表示以什么结尾的文件，use表示用什么方法去处理这样的文件
            //必须先是'style-loader'，后面才是'css-loader'
        ]
    }
}

调用规则
在“index.js”文件中通过“import”进行调用

// 导入样式（在webpack中，一切皆模块，都可以通过ES6导入语法进行导入和使用）
import './css/index.css'

安装less-loader

//默认安装最新版本
npm i less-loader less -D
//指定安装版本
npm i less-loader@10.0.1 less@4.1.1 -D

安装完成之后和“.css”一样需要在webpack.config.js的module中配loader规则

module.exports = {
    mode:'development',
        module:{
        //所有第三方文件模块的匹配规则
        rules: [
            //文件后缀名的匹配规则
            {test: /\.less$/,use: ['style-loader','css-loader','less-loader']}
            //test指定什么类型文件，$表示以什么结尾的文件，use表示用什么方法去处理这样的文件
        ]
    }
}

调用规则
在“index.js”文件中通过“import”进行调用

// 导入样式（在webpack中，一切皆模块，都可以通过ES6导入语法进行导入和使用）
import './css/index.less'

安装url-loader

//默认安装最新版本
npm i url-loader file-loader -D
//指定安装版本
npm i url-loader@4.1.1 file-loader@6.2.0 -D

安装完成之后和“.css”一样需要在webpack.config.js的module中配loader规则

module.exports = {
    mode:'development',
        module:{
        //所有第三方文件模块的匹配规则
        rules: [
			//与上面类似
            //处理图片类型文件
            {test: /\.jpg|pan|gif$/,use: ['url-loader?limit-22222']},
            //limit用来指定图片的大小，单位是字节（byte），只有≤limit的图片才能被转换为base64格式，这里也可以不用加限值，如果不加限值的话就是去掉“?limit-22222”就行了
        ]
    }
}

调用规则
在“index.js”文件中通过“import”进行调用

// 导入样式（在webpack中，一切皆模块，都可以通过ES6导入语法进行导入和使用）
//导入图片，得到图片文件
import logo from './image/logo.jpg'
//给image标签的src动态赋值
$('.box').attr('src',logo)

在“index.js”文件中需要设置

<!-- 需求：把/src/images/logo.jpg设置给src属性 -->
    <img src="" alt="" class="box">

安装babel-loader

webpack只能打包处理一部分高级的JavaScript语法，对于一些webpack无法处理的高级JS语法，需要借助于label-loader 进行打包处理

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

安装完成之后和“.css”一样需要在webpack.config.js的module中配loader规则

module:{
        //所有第三方文件模块的匹配规则
        rules: [
            //处理webpack无法处理的高级语法
            {test: /\.js$/,use: 'babel-loader',exclude: /node_modules/},
            // 注意：必须使用exclude指定排除项，因为node_modules目录下的第三方包不需要被打包
        ]
    }

配置完成之后还需要配置babel-loader
在项目目录下面，创阿金babel.config.js的配置文件，并在文件中进行如下配置

module.exports = {
    //声明babel可用的插件
   // 将来，webpack在调用babel-loader的时候会先加载plugins插件来使用
    plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]]
}

调用

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

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

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