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 -Dmodule: { 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'不用数组即可
小程序













