>[success] # 浅解loader [官网对laoders 介绍](https://webpack.js.org/concepts/#loaders) 1. 使用参考 `了解配置 -- webpack.config.js` 章节，除了这个章节讲述的**配置方式**，loder 还有另外两种使用形式 **内联方式，CLI方式（webpack5中不再使用）** * **内联方式**，当下载了对应 loader 包后，不在配置文件的module配置指定解析模块，但想让找到对应loader 即可在引入的样式前加上使用的loader，并且使用!分割`import 'css-loader!./index.css'` 实际不会用 * **CLI方式**， **webpack5的文档中已经没有了**`--module-bind` 实际不会用 >[info] ## 三类 loader 1. **编译转换类** - 将资源模块转换为js代码，以JS形式工作的模块。如：`css-loader` 2. **文件操作类** - 将资源模块拷贝到输出目录，同时将文件的访问路径向外导出 如：`file-loader` 3. **代码检查类** - 对加载的资源文件（一般是代码）进行校验的加载器，目的统一代码风格，提高代码质量，一般不会修改生产环境的代码 >[info] ## 关于为什么需要loader 1. webpack 是否只能将**js作为入口文件**，如果尝试将**css文件作为入口文件运行**webpack 运行后会产生报错，错误信息大体的意思是说，**在解析模块过程中遇到了非法字符**  进一步通过报错提供的网址 https://webpack.js.org/concepts/#loaders 中描述**webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力**。但是此处我们让 **Webpack 处理的是 CSS 代码，而 CSS 代码是不符合 JavaScript 语法的，所以自然会报出模块解析错误** >[danger] ##### 证明loader 是的对语法而不是文件 1. 虽然官方文档已经明确说明webpack 默认解析的js 和json 这两种语法，但如何验证，现在将**刚才的css文件内容里面写的是js代码在运行**，可以发现运行**成功并且没有报错也成功打包完成** 在一个 **src/index.css** 文件里编写一段js代码`console.log('css 文件写的js 代码')` >[danger] ##### laoder 本质 1. 当用一个css 文件做处理的时候，里面是正常的css代码的时候发现上面的报错信息 **You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. （我们需要用适当的加载器来处理这种文件类型，而当前并没有配置一个可以用来处理此文件的加载器）** 2.Webpack 是用 Loader（加载器）来处理每个模块的，而内部默认的Loader 只能处理 JS 模块，**如果需要加载其他类型的模块就需要配置不同的 Loader**。  3. webpack 会根据配置将一个文件作为打包的入口（一般为js), 根据该入口文件的导入语句解析**推断该文件所依赖的资源模块**，**去解析每个资源模块对应的依赖，最后形成的项目关系之间的依赖树**，webpack会递归这个依赖树，找到每个节点所**对应的资源文件**，根据配置文件当中的**rules属性去找到模块文件所对应的(loader)加载器**，然后加载器加载该模块，将加载器的结果放入bundle.js即打包结果当中，从而实现整个项目的打  4. **Loader机制是webpack的核心** >[danger] ##### 常见的loader | 名称 | 连接 | | --- | --- | | file-loader | [https://webpack.js.org/loaders/file-loader](https://webpack.js.org/loaders/file-loader) | | url-loader | [https://webpack.js.org/loaders/url-loader](https://webpack.js.org/loaders/url-loader) | | babel-loader | [https://webpack.js.org/loaders/babel-loader](https://webpack.js.org/loaders/babel-loader) | | style-loader | [https://webpack.js.org/loaders/style-loader](https://webpack.js.org/loaders/style-loader) | | css-loader | [https://webpack.js.org/loaders/css-loader](https://webpack.js.org/loaders/css-loader) | | sass-loader | [https://webpack.js.org/loaders/sass-loader](https://webpack.js.org/loaders/sass-loader) | | postcss-loader | [https://webpack.js.org/loaders/postcss-loader](https://webpack.js.org/loaders/postcss-loader) | | eslint-loader | [https://github.com/webpack-contrib/eslint-loader](https://github.com/webpack-contrib/eslint-loader) | | vue-loader | [https://github.com/vuejs/vue-loader](https://github.com/vuejs/vue-loader) |