微信小程序> (六)预处理loader

(六)预处理loader

浏览量:1883 时间: 来源:Luckyzhoufangbing

1. loader

每一个 loader 都是个函数,入餐是 input , 导出 output

公式

output = loader (input)

 如babel将ES6转变为es5

ES5 = babel-loader (ES6)

loader 的链式使用

output = loaderA(loaderB(loaderC(input)))

如在工程中编译scss

style标签 = style-loader(css-loader(scss-loader(scss)))

2. loader 预处理器的意义

网页中面临的静态资源是多种多样的,但是webpack本身只认识 javascript ,其他类型的资源必须使用一个或者多个loader进行转义,输出 webpack 能够识别的格式再进行,这就是 loader 预处理器的作用

3. loader 的使用

eg:

cnpm i css-loader style-loader -D
module: {    rules: [{      test: /.css$/,      use: ['style-loader', 'css-loader']    }]  }

在webpack.config.js 中添加 module 对象

test 表示只要后缀名匹配 .css,都使用use 数组中的 loader

注意:loader 是按顺序来的,最后使用的写在前面

先 css-loader 后 style-loader

如果只需要一个loader

use: 'css-loader'

不用数组即可

小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎