webpack學習筆記(二)--解析css、less、sass和圖片

時間 2019-11-07

標籤 webpack 學習筆記解析 css sass 圖片欄目 CSS 简体版

原文原文鏈接

解析css

js文件引用index.css文件，使用css-loader加載.css文件後轉換成commonjs對象，插入到js文件中；經過style-loader，建立style標籤插入到html文件中css

一、安裝 npm i style-loader css-loader -Dhtml

二、webpack.config.js中添加配置node

loader的調用是鏈式調用，執行順序是從右到左。因此先寫style-loader在寫css-loaderwebpack

執行時先用css-loader解析css文件轉成對象，傳遞給style-loader插入到headgit

注意：樣式文件和引用的後綴名爲.cssgithub

module.exports={
    entry:{...},
    outpath:{path:...,filename:...},
    mode:'production',
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                'style-loader',
                'css-loader'
                ]
            },
        ]
    }
}
複製代碼

解析less

less創建在css基礎上，先解析less，再轉爲css,再插入到headweb

一、安裝 npm i less less-loader -D
二、webpack.config.js中添加配置

注意：樣式文件和引用的後綴名爲.lessnpm

module.exports={
    entry:{...},
    outpath:{path:...,filename:...},
    mode:'production',
    module:{
        rules:[
            {
                test:/\.less$/,
                use:[
                'style-loader',
                'css-loader',
                'less-loader'
                ]
            },
        ]
    }
}
複製代碼

解析sass

sass創建在css基礎上，先解析sass，再轉爲css,再插入到headsass

一、安裝 npm i less less-loader node-sass -D
二、webpack.config.js中添加配置

注意：樣式文件和引用的後綴名爲.scssless

module.exports={
    entry:{...},
    outpath:{path:...,filename:...},
    mode:'production',
    module:{
        rules:[
            {
                test:/\.scss$/,
                use:[
                'style-loader',
                'css-loader',
                'sass-loader'
                ]
            },
        ]
    }
}
複製代碼

解析圖片

file-loader用於處理圖片和字體文件

一、安裝 npm i file-loader -D

二、webpack.config.js中添加配置

module.exports = {
    entry:{...},
    outpath:{path:...,filename:...},
    mode:'production',
    module:{
        rules:[
            {
                test:/\.(jpg|png|gif|jpeg)$/,
                use:{
                  'file-loader',
                  options:{
                    name:'img/[name]_[hash:8].[ext]'
                  }
                }
            }
        ]
    }
}
複製代碼

三、佔位符

[ext] : 資源後綴名
[name] : 文件名稱
[path] : 文件的相對路徑
[folder] : 文件所在的文件夾
[contenthash] : 文件的內容hash,默認是md5生成
[hash] : 文件內容的hash,默認是md5生成
[emoji] : 一個隨機的指代文件內容的emoji
複製代碼

url-loader作了base64的轉碼，內部使用的也是file-loader

一、安裝 npm i file-loader -D

二、webpack.config.js中添加配置

module.exports = {
    entry:{...},
    outpath:{path:...,filename:...},
    mode:'production',
    module:{
        rules:[
            {
                test:/\.(jpg|png|gif|jpeg)$/,
                use:[
                  {
                      loader:'url-loader',
                      options:{
                          limit:10240 //圖片小於10k webpack會對圖片作base64，編譯到js文件中
                      }
                  }
                ]
            }
        ]
    }
}
複製代碼

示例源碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。