## loader的使用 用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。 webpack扩展对应的loader： 加载css、图片，也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。 loader使用过程： 步骤一：通过npm安装需要使用的loader 步骤二：在webpack.config.js中的modules关键字下进行配置 ## 有哪些常见的Loader * `babel-loader`：把 ES6 转换成 ES5 * `sass-loader`：将SCSS/SASS代码转换成CSS * `css-loader`：加载 CSS，支持模块化、压缩、文件导入等特性 * `style-loader`：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS * `postcss-loader`：扩展 CSS 语法，使用下一代 CSS，可配合 autoprefixer 插件自动补齐 CSS3 前缀 * `eslint-loader`：通过 ESLint 检查 JavaScript 代码 * `file-loader`：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体) * `url-loader`：与 file-loader 类似，区别是用户可以设置一个阈值，大于阈值会交给 file-loader 处理，小于阈值时返回文件 base64 形式编码 (处理图片和字体) * `source-map-loader`：加载额外的 Source Map 文件，以方便断点调试 * `svg-inline-loader`：将压缩后的 SVG 内容注入代码中 * `image-loader`：加载并且压缩图片文件 --- ## 编写loader https://juejin.cn/post/6995758595648258078 loader的特性 loader本质上是一个ESM模块，它导出一个函数，在函数中对打包资源进行转换 loader必须返回一段js代码，这样eval才能执行，否则会报错，多个loader，保证最后面一个返回js代码就行。 当配置多个loader时，loader的执行顺序时从右往左，右边的执行结果作为参数传到左边 ```js // less-loader把less转化成css，传给css-loader，css-loader把结果给style-loader，style-loader返回javascript代码字符串。 { test:/\.less$/, use:[ 'style-loader','css-loader','less-loader' ] } ``` - 如何保证各个loader按照预想方式工作？ 使用 enforce 强制执行 loader 的作用顺序 - 自定义loader webpack将loader加载后会将代码放到打包文件boundle.js中，一个loader对应一个(function(){}) 模块；所以在loader中需要导出 webpack的打包文件boundle.js中，支持CommonJS的方式、ES Modules的方式导出 ```js // 比如：申明一个读取markdown文件内容的loader。 cosnt { getOptions } = require('loader-utils') // 获取loader的配置项option const marked = require('marked') module.exports = function(source){ const options = getOptions(this) //获取loader配置选项 const html = marked(source) //对输入内容进行处理 // 1、CommonJS的方式：输出的模块转换为字符串的形式return // return `module.exports = ${JSON.stringify(html)}` // 2、ES Modules：webpack内部会自动转换export default导出的代码 // return `export default ${JSON.stringify(html)}` return html //返回给下一个loader处理，如果不用给下一个loader处理需要保证返回js代码 } ``` [！！！！！ loader 官方文档 ！！！！！ ](https://www.webpackjs.com/loaders/) ## 常见loader #### a, css文件处理 在src目录中，创建一个css文件，其中创建一个normal.css文件。 ```javascript npm install css-loader --save-dev // css-loader只负责加载css文件 npm install style-loader --save-dev // style-loader 将css具体样式添加到DOM中 ``` > 在处理css文件过程中，应该是css-loader先加载css文件，再由style-loader来进行进一步的处理 为什么会将style-loader放在前面呢？： 因为webpack在读取使用的loader的过程中，是按照从右向左的顺序读取的。 #### b, less文件处理 – less-loader ```javascript npm install --save-dev less-loader less ``` #### c, 图片文件处理 – url-loader，file-loader url-loader 像 file loader 一样工作，但如果文件小于限制，可以返回 data URL file-loader 将文件发送到输出文件夹，并返回（相对）URL ```javascript npm install --save-dev url-loader ``` limit属性的作用，当图片小于8kb时，对图片进行base64编码， 大于8kb的图片，会通过file-loader进行处理 ```javascript npm install --save-dev file-loader ``` webpack自动生成一个非常长的名字：一个32位hash值，目的是防止名字重复 ```javascript name: './img/[name].[hash:8].[ext]' // 修改文件名称 ``` #### d, ES6语法转成ES5：babel 一些对ES6还不支持的浏览器没有办法很好的运行代码 ```javascript npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 ``` #### <font color=red /> 5，webpack中配置Vue webpack环境中集成Vuejs，安装vue： npm install vue --save 浏览器中有报错，因为使用的是runtime-only版本的Vue ```javascript resolve:{ 'vue$': 'vue/dist/vue.esm.js' // 找到开发时可以用的vue文件 } }, ```