# 1、webpack中的加载器 * [1.通过loader打包非js模块](https://www.kancloud.cn/zheng1234/vuejs/2393808#1loaderjs_1) * [2\. loader的调用过程](https://www.kancloud.cn/zheng1234/vuejs/2393808#2_loader_7) * [2.4 webpack中加载器的基本使用 （重点）](https://www.kancloud.cn/zheng1234/vuejs/2393808#24_webpack___10) * [1.打包处理css文件](https://www.kancloud.cn/zheng1234/vuejs/2393808#1css_12) * [2.打包处理less文件](https://www.kancloud.cn/zheng1234/vuejs/2393808#2less_29) * [3.打包处理scss文件](https://www.kancloud.cn/zheng1234/vuejs/2393808#3scss_42) * [4.配置postCSS自动添加css的兼容前缀](https://www.kancloud.cn/zheng1234/vuejs/2393808#4postCSScss_54) * [5.打包样式表中的图 片和字体文件](https://www.kancloud.cn/zheng1234/vuejs/2393808#5__71) * [6.打包处理js文件中的高级语法](https://www.kancloud.cn/zheng1234/vuejs/2393808#6js_86) # 1.通过loader打包非js模块 在实际开发过程中，webpack 默认只能打包处理以. jis后缀名结尾的模块，其他**非.js 后缀名结尾的模块**，webpack默认处理不了，**需要调用loader 加载器才可以正常打包**，否则会报错! loader加载器可以协助webpack 打包处理特定的文件模块，比如: ● less-loader 可以打包处理 .less 相关的文件 ● sass-loader 可以打包处理 .scss 相关的文件 ● url-loader 可以打包处理 css 中与 url 路径相关的文件 ## 2\. loader的调用过程  # 2.4 webpack中加载器的基本使用 （重点）  ## 1.打包处理css文件 ①运行**npm i style-loader css-loader -D**命令，安装处理css文件的loader ②在 webpack.config.js的module -> rules 数组中，添加loader. 规则如下: //所有第三方文件模块的匹配规则 ~~~ module : { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader'] } ] } ~~~ 其中，**test**表示匹配的文件类型，**use**表示对应要调用的 loader **注意: ● use数组中指定的loader 顺序是固定的 ● 多个loader 的调用顺序是:从后往前调用**  ## 2.打包处理less文件 ① 运行**npm i less-loader less -D**命令 ② 在**webpack. config.js**的**module -> rules**数组中，添加loader 规则如下: ~~~ //所有第三方文件模块的匹配规则 module: { rules: [ { test: /\.less$/, use: [ 'style-loader', 'css- loader'，' less-loader' ] } ] } ~~~  ## 3.打包处理scss文件 ①运行**npm i sass-loader node-sass -D**命令 ②在**webpack.config.js**的module -> rules 数组中，添加loader 规则如下: ~~~ //所有第三方文件模块的匹配规则 module: { rules: [ { test: /\.scss$/, use: [ 'style- loader'，'css-loader'，' sass-loader' ] } ] } ~~~ ## 4.配置postCSS自动添加css的兼容前缀 ① 运行**npm i postcss-loader autoprefixer -D**命令 ② 在项目根目录中创建**postcss**的配置文件**postcss.config.js**,并初始化如下配置: ~~~ const autoprefixer = require ( ' autoprefixer') //导入自动添加前缀的插件 module.exports = { plugins: [ autoprefixer ] //挂载插件 } ~~~ ③ 在 webpack.config.js的module -> rules 数组中，修改css的loader 规则如下: ~~~ module : { rules: [ { test:/\.css$/, use: ['style- loader', 'CsS- loader', 'postcss- loader'] } ] } ~~~ ## 5.打包样式表中的图 片和字体文件 ①运行**npm i url-loader file-loader -D**命令 ②在**webpack.config.js**的module -> rules数组中，添加loader 规则如下: ~~~ module :{ rules: [ { test:/\.jpg | png | gif | bmp | ttf | eot | svg | woff | woff2$/,use :'url- loader?limit=16940 ' } ] } ~~~ 其中 ? 之后的是loader的**参数项**。 limit用来指定图片的大小，单位是字节(byte) ,只有小于limit大小的图片，才会被转为base64 图片 ## 6.打包处理js文件中的高级语法 ① 安装babe l转换器相关的包: npm i babel- loader @babel/core @babel/ runtime -D ② 安装babel语法插件相关的包: npm i @babel/preset-env @babel/plugin-transform-runtime @babel/ plugin-proposal-class-properties -D ③ 在项目根目录中，创建**babel**配置文件**babel.config.js**并初始化基本配置如下: ~~~ module . exports = { presets: [ ' @babel /preset-env' ] , plugins : [ ' @babel /plugin-transform- runtime'， ' @babel/plugin-proposal - class-properties' ] } ~~~ ④ 在 webpack. config.jis的module -> rules 数组中，添加loader 规则如下: ~~~ // exclude为排除项，表示babel- loader不需要处理node_ modules中的js文件 // exclude 排除 不要这个 { test: /\.js$/, use: 'babel- loader', exclude: /node_ modules/ } ~~~