webpack中的loader加载器

目录

1.loader概述

2.loader的调用过程

3.打包处理css文件 

4.打包处理 less 文件

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

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

6.1  安装babel-loader相关的包

​编辑 6.2 配置babel-loader

7. 配置webpack的打包发布

 把JavaScript文件统一生成到js目录中

 把图片文件统一生成到image目录中

自动清理dist目录下的旧文件 

---

1.loader概述

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

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

• css-loader 可以打包处理 .css 相关的文件
• less-loader 可以打包处理 .less 相关的文件
• babel-loader 可以打包处理webpack无法处理的高级JS语法

2.loader的调用过程

3.打包处理css文件 

① 运行 npm i style-loader@3.0.0 css-loader@5.2.6 -D 命令,安装处理CSS文件的loader

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

module: {         //所有第三方文件模块的匹配规则
        rules: [       //文件后缀名的匹配规则
                { 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 文件

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

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

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

}

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

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

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

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

}

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

•  limit用来指定图片的大小，单位是字节(byte)
• 只有≤limit大小的图片，才会被转为base64格式的图片

回顾base64的图片优缺点：

 

 Base64图片适合转换图片小的照片，如果图片太大就不太适合了，例：轮播图什么的，适合转换logo等小的图片。

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

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

6.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数组中，添加loader规则如下:

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

    在配置babel-loader的时候，程序员只需要把自己的代码进行转换即可，一定要排除node_ modules 目录中的JS文件

  因为第三方包中的JS兼容性，不需要程序员关心 

 6.2 配置babel-loader

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

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

 详情请参考 Babel 的官网 https://babeljs.io/docs/en/babel-plugin-proposal-decorators

7. 配置webpack的打包发布

 在package.json文件的scripts节点下，新增build命令如下:

"scripts": {
        "dev": "webpack serve", //开发环境中，运行dev命令
        "build": "webpack --mode production" //项目发布时，运行build命令
}

--model是一个参数项，用来指定webpack的运行模式。production 代表生产环境，会对打包生成的文件进行代码压缩和性能优化。 

 注意:通过--model指定的参数项,会覆盖webpack.config.js中的model选项。

 把JavaScript文件统一生成到js目录中

在webpack.config.js配置文件的output节点中，进行如下的配置:

output: {
        path: path.join(__dirname,'dist'),
        // 明确告诉webpack 把生成的bundle.js 文件存放到dist 目录下的js子目录中
        filename: 'js/bundle.js' ,

}

 把图片文件统一生成到image目录中

 修改webpack.config.js中的url-loader配置项,新增outputPath选项即可指定图片文件的输出路径:

{
        test:/\.jpg|png|gif$/,
        use:{
                loader: 'url-loader',
                options: {
                        limit: 22228,
                        //明确指定把打包生成的图片文件，存储到dist 目录下的image 文件夹中
                        outputPath: 'image',
                },
        },
}

自动清理dist目录下的旧文件 

 为了在每次打包发布时自动清理掉dist目录中的旧文件，可以安装并配置clean-webpack-plugin插件:

// 1.安装清理dist 目录的webpack插件
npm install clean-webpack-plugin@3.0.0 -D

// 2.按需导入插件、得到插件的构造函数之后，创建插件的实例对象
const  { CleanWebpackPlugin } = require( 'clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()

// 3.把创建的cleanPlugin 插件实例对象，挂载到plugins 节点中
plugins: [htmlPlugin, cleanPlugin],  //挂载插件