js css加载器,webpack的CSS加载器的使用

什么是loader

loader用于转换应用程序的资源文件，他们是运行在nodejs下的函数，使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置)，例如：你可以使用loader来告诉webpack去加载一个coffeeScript或者Babel文件。

loader的解析

loader的解析类似模块，一个loader模块会导出一个方法并且可被nodejs写为可兼容的JavaScript,通常情况下通过npm来管理loader,但你也可以把loader放在自己的应用里。

webpack中常用的加载器

css-loader 处理css中路径引用等问题

用于在js中加载css，解释@import和url()

options

alias: 解析别名

importLoaders(@import): 在css-loader前应用的loader的数目，默认为0

Minimize: true or false 是否开启css代码压缩，比如压缩空格不换行

modules: 是否开启css-module

module.exports = {

...

module: {

rules: [{

test: /\.css$/,

use: ['style-loader', {

loader: 'css-loader',

options: {//当css文件中又引用了其他的css的时候，需要设置importLoaders

importLoaders: 1

}

}]

}]

}

};

style-loader 动态把样式写入css

加载的css作为style标签内容插入到html中,以形式在html页面中插入css代码

options

insertAt: 插入位置

insertInto: 插入到指定的dom

singleton: true or false，多个样式是否只生成一个标签

postcss-loader

postcss-loader：为了浏览器的兼容性，有时候我们必须加上-webkitm, -ms, -moz等前缀。目的就是让页面可以在每个浏览器上正常运行。postcss是一个CSS的处理平台可以帮CSS实现更多的功能。

用法：

安装postcss: npm install postcss-loader autoprefixer

配置文件

webpack.config.js:

module: {

rules: [{

test: /\.css$/

loader: 'style-loader!css-loader!postcss-loader'

}]

}

postcss.config.js

module.exports = {

plugins: [

require('autoprefixer')//在postcss-loader中引入autoprefixer插件

]

}

或者

const autoprefixer = require('autoprefixer');

module: {

rules: [{

test: /\.css$/,

use: ['style-loader', 'css-loader', {

loader: 'postcss-loader',

options: {

plugins() {

return [autoprefixer];

}

}

}]

}]

}

less-style

添加对webpack的LESS支持。当遇到less文件时，先交给less-loader处理，然后交给css-loader，最后交由style-loader处理，然后执行webpack打包

module: {

rules: [{

test: /\.less$/,

loader: 'style-loader!css-loader!less-loader'

}]

}

要启用CSS的source map，你需要将sourceMap选项传递给less-loader和css-loader

CSS SourceMap信息文件，里面存储着位置信息。随着代码增多，我们会对代码进行压缩，代码压缩之后进行调bug定位会非常困难，于是引入sourceMap记录压缩前后的位置信息，当产生错误时直接定位到未压缩前的位置，方便调试。简单来说就是记录压缩的翻译文件，通过这个文件可以找到你的对应源码

module.exports = {

...

module: {

rules: [{

test: /\.less$/,

use: ['style-loader', 'css-loader', {

loader: 'less-loader',

options: {

sourceMap: true

}

}]

}]

}

};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。