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
}
}]
}]
}
};
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
總結
以上是生活随笔為你收集整理的js css加载器,webpack的CSS加载器的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css两列等高,css 多列等高
- 下一篇： html 布局满屏,CSS全屏布局的5种