Skip to main content

加载器实践

HTML处理流程​

pug-loader​

作用：

安装：npm i -D pug pug-loader

使用：


ejs-loader​

vue-loader​

CSS处理流程​

graph R

image-20211223155107370

style-loader​

作用：将css转入成字符串后，注入到javascript代码中，通过javascript想dom增加样式，也可以通过 ExtracTextPlugin 插件，将css抽离为单独文件。

安装：npm i -D css-loader style-loader

使用：

module:{
    rules:[{
        test:/\.css$/,
        use:['style-loader','css-loader'] //右往左解释原则
    }]
}

css-loader​

作用：找出css代码中@import和rul()的语句，告诉webpack依赖一些资源，同时支持css modules、压缩css等功能，处理完成后再交给stylus-loader处理

安装：npm i -D css-loader style-loader

使用：

module:{
    rules:[{
        test:/\.css$/,
        use:['style-loader','css-loader'] //右往左解释原则
    }]
}

postcss-loader​

对原生的css代码进行一些额外的处理，像对某些属性添加浏览器前缀、

安装：npm i -D postcss-loader autoprefixer

使用：

module:{
    rules:[{
        test:/\.css$/,
        // postcss-loader 应该放在 sass/less等loader之后
        use:['style-loader','css-loader','postcss-loader','stylus-loader'] 
    }]
}

less-loader​

作用：编译less为css文件，再交给css-loader处理

安装：npm i -D less less-loader css-loader style-loader

使用：

module:{
    rules:[{
        test:/\.less$/,
        use:['style-loader','css-loader','less-loader'] //从右往左解释原则
    }]
}

sass-loader​

作用：编译sass为css文件，再交给css-loader处理

安装：npm i -D node-sass sass-loader

使用：

module:{
    rules:[{
        test:/\.scss$/,
        use:['style-loader','css-loader','sass-loader'] //从右往左解释原则
    }]
}

stylus-loader​