欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

webpack的CSS加載器的使用

 更新時(shí)間:2018年09月11日 09:46:40   作者:ZM_CZR  
這篇文章主要介紹了webpack的CSS加載器的使用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

什么是loader

loader用于轉(zhuǎn)換應(yīng)用程序的資源文件,他們是運(yùn)行在nodejs下的函數(shù),使用參數(shù)來(lái)獲取一個(gè)資源的來(lái)源并且返回一個(gè)新的來(lái)源(資源的位置),例如:你可以使用loader來(lái)告訴webpack去加載一個(gè)coffeeScript或者Babel文件。

loader的解析

loader的解析類(lèi)似模塊,一個(gè)loader模塊會(huì)導(dǎo)出一個(gè)方法并且可被nodejs寫(xiě)為可兼容的JavaScript,通常情況下通過(guò)npm來(lái)管理loader,但你也可以把loader放在自己的應(yīng)用里。

webpack中常用的加載器

css-loader 處理css中路徑引用等問(wèn)題

用于在js中加載css,解釋@import和url()

options

alias: 解析別名

importLoaders(@import): 在css-loader前應(yīng)用的loader的數(shù)目,默認(rèn)為0

Minimize: true or false 是否開(kāi)啟css代碼壓縮,比如壓縮空格不換行

modules: 是否開(kāi)啟css-module

module.exports = {
 ...
 module: {
  rules: [{
   test: /\.css$/,
   use: ['style-loader', {
    loader: 'css-loader',
    options: {//當(dāng)css文件中又引用了其他的css的時(shí)候,需要設(shè)置importLoaders
     importLoaders: 1
    }
   }]
  }]
 }
};

style-loader 動(dòng)態(tài)把樣式寫(xiě)入css

加載的css作為style標(biāo)簽內(nèi)容插入到html中,以<style></style>形式在html頁(yè)面中插入css代碼

options

insertAt: 插入位置

insertInto: 插入到指定的dom

singleton: true or false,多個(gè)樣式是否只生成一個(gè)<style></style>標(biāo)簽

postcss-loader

postcss-loader:為了瀏覽器的兼容性,有時(shí)候我們必須加上-webkitm, -ms, -moz等前綴。目的就是讓頁(yè)面可以在每個(gè)瀏覽器上正常運(yùn)行。postcss是一個(gè)CSS的處理平臺(tái)可以幫CSS實(shí)現(xiàn)更多的功能。

用法:

安裝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

添加對(duì)webpack的LESS支持。當(dāng)遇到less文件時(shí),先交給less-loader處理,然后交給css-loader,最后交由style-loader處理,然后執(zhí)行webpack打包

module: {
 rules: [{
  test: /\.less$/,
  loader: 'style-loader!css-loader!less-loader'
 }]
}

要啟用CSS的source map,你需要將sourceMap選項(xiàng)傳遞給less-loader和css-loader

CSS SourceMap信息文件,里面存儲(chǔ)著位置信息。隨著代碼增多,我們會(huì)對(duì)代碼進(jìn)行壓縮,代碼壓縮之后進(jìn)行調(diào)bug定位會(huì)非常困難,于是引入sourceMap記錄壓縮前后的位置信息,當(dāng)產(chǎn)生錯(cuò)誤時(shí)直接定位到未壓縮前的位置,方便調(diào)試。簡(jiǎn)單來(lái)說(shuō)就是記錄壓縮的翻譯文件,通過(guò)這個(gè)文件可以找到你的對(duì)應(yīng)源碼

module.exports = {
 ...
 module: {
  rules: [{
   test: /\.less$/,
   use: ['style-loader', 'css-loader', {
    loader: 'less-loader',
    options: {
     sourceMap: true
    }
   }]
  }]
 }
};

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論