webpack中的loader(webpack遇到以非.js结尾的文件如何处理)

loader概述

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

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

了解loader调用的过程
1.打包处理css文件，安装css文件的loader

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

其中，test表示匹配的文件类型，use表示对应要调用的loader
注意：use数组中指定的loader顺序是固定的，多个loader的调用顺序是从后往前调用（越新建立的则优先调用）
webpack把index.css这个文件，先转交给最后一个loader进行处理（先转交给css-loader),当css-loader处理完毕后，会把处理的结果，转交给下一个loader（转交给style-loader），当style-loader处理完毕后，发现没有下一个loader了，于是就把处理的结果转交给了webpack，webpack把style-loader处理的结果合并到/dist/bundle.js中，最终生成打包好的文件
2.打包处理less文件

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

3.演示图片loader加载的问题

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

其中？之后的是loader的参数项，limit用来指定图片的大小，单位是字节（byte），只有<=limit大小的图片，才会被转为base64格式的图片。

介绍webpack处理样式的进程

webpack中的loader
打包处理JS文件中的高级语法，webpack只能打包处理一部分高级的javascript语法，对于那些webpack无法处理的高级JS语法，需要借助于babel-loader进行打包处理

注意：必须使用exclude指定排除项，因为node_modules目录下的第三方包不需要被打包
在webpack.config.js的module–>rules数组中，添加loader规则如下：

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

配置build命令-发布项目
配置webpack的打包发布
在package.json文件的srcipts节点下，新增build命令如下：

–model是一个参数项，用来指定webpack的运行模式，production代表生产 环境，会对打包生成的文件进行代码压缩和性能优化
注意：通过 --model指定的参数项，会覆盖webpack.config.js中的model选项

打包发布

用git bush 打开项目
运行 npm run build ,文件目录下会出现dist文件夹