webpack配置 加载器loader配置

webpack中配置加载器loader

1.背景

在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，
默认情况下，webpack不能打包转换css文件，在进行必要的配置之前，会报如下错误）

ERROR in ./src/styles/a.css 1:4 --- 告诉css文件出问题
Module parse failed: Unexpected token (1:4) -- 模块文件转换失败
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
你可以需要一个适合的loader去处理这种类型的文件 ，当前并没有loader被配置用于这个文件的处理

webpack 默认处理不了，需要合适的loader进行处理，否则会报错！

2.作用

loader 加载器的作用：协助 webpack 打包处理特定的文件模块。比如：
⚫ css-loader 可以打包处理 .css 相关的文件
⚫ less-loader 可以打包处理 .less 相关的文件
⚫ babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法

3.调用过程

4.使用方式

1. 百度查找合适的loader
2. 查阅官网 https://webpack.docschina.org/concepts/#loaders
3. 下载 npm i 加载器名称
4. 在 webpack.config.js 的 module -> rules 数组中添加配置
5. 重新运行脚本命令实现打包转换
6. 注意:
   1. use 数组中指定的 loader 顺序是固定的
   2. 多个 loader 的调用顺序是：从后往前调用

webpack处理css文件

流程:

1. 下载css-loader,style-loader
   npm install css-loader style-loader --save-dev
2. 在 webpack.config.js 的 module -> rules 数组中添加配置
3. 重新运行脚本命令实现打包转换
   
   注意：
   use 数组中指定的 loader 顺序是固定的
   多个 loader 的调用顺序是：从后往前调用

webpack处理less预处理器文件

1. 在styles目录下添加b.less文件，并添加简单的样式
2. 在app.js下引入b.lesss样式文件：import ‘./styles/b.less’
3. 报错信息（默认情况下，webpack不能打包转换less文件，在进行必要的配置之前，会报和之前类似的错误）
4. 下载less,less-loader
   npm i less less-loader --save-dev
5. 在 webpack.config.js 的 module -> rules 数组中添加配置
6. 重新运行
   

webpack处理图片和图标

1. 添加图片的使用
   1. 在styles目录下的a.css文件，并添加简单的使用图片的背景样式
   2. 在app.js中添加对图片的引用并生成标签追加到页面中
2. 报错信息（默认情况下，webpack不能打包转换图片资源文件或者字体样式文件，在进行必要的配置之前，会报和之前类似的错误）
3. 下载file-loader
   npm install file-loader --save-dev
4. 在webpack.config.js文件的module结构中添加rules配置
5. 重新运行
   

webpack将ES6转ES5

1. webpack本身并不能进行js高级代码的打包处理，同时一些老版的浏览器可能不支持ES6，这个babel的作用就是能够让webpack处理高级代码，同时将ES6转换ES5，达到浏览器兼容的目的
2. 下载babel-loader：
   npm install babel-loader@8.2.1 @babel/core@7.12.3 @babel/plugin-proposal-class-properties@7.12.1 -D
3. 在webpack.config.js文件的module结构中添加rules配置
4. 重新运行
   

webpack处理vue单文件组件

同样的，如果在案例中添加单文件组件并实现渲染，也会报与之前类似的错误，这个时候可以使用vue-loader来进行处理

1. Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件

2. 我们需要在webpack中添加Vue Loader的配置

3. 下载：npm install -D vue-loader vue-template-compiler

4. 添加配置

   1. 引入插件
   2. 添加vue-loader配置

传送门：https://vue-loader.vuejs.org/zh/