Webpack解讀之loader

banggan發表於2019-04-27
Web

原文地址：banggan.github.io/2019/04/27/…

Webpack核心概念解析

終於忙完了論文，可以愉快的開始學習了，重拾起重學前端、webpack以及Vue的原始碼解讀作為入職前的複習吧。整個webpack系列將分成五個大的部分進行，以webpack4.0為文件進行解讀，從簡單的概念解讀到最後的實現。 整個知識點涉及範圍：

image

loader

使用loader來預處理檔案，把不同的靜態資源（模組的結尾不是js的模組)打包成js檔案

loader打包靜態資源

打包圖片

  • 安裝使用file-loader實現：npm install file-loader -D
  • 在webpack.config.js中新增loader的配置
module.exports = {
    //打包專案的入口檔案
    entry: './src/index.js',
    module:{
        rules:[{
            test:/\.(jpg|png|gif)$/,//打包以jpg、png、gif結尾的所有圖片檔案
            use:{
                loader:'file-loader',
                options:{//placeholder 佔位符 
                    name:'[name]_[hash].[ext]',//保持原圖片的名字+hash值和字尾,主要單引號
                    outputPath:'image/'//打包圖片的位置
                }
            }
        }]
    }
}
複製程式碼

打包圖片成base64格式

url-loader基本能實現file-loader的打包功能，適用於小圖片的打包

  • 好處：圖片打包成js檔案，不用載入圖片的地址，頁面快速顯示
  • 壞處：圖片過大導致js檔案過大

所以，當圖片的大小小於limit值時會把圖片打包成base64格式，大於limit值則按照file-loader打包成圖片檔案

  • 安裝使用url-loader實現：npm install url-loader -D
  • 在webpack.config.js中新增loader的配置
module.exports = {
    module:{
        rules:[{//打包以jpg、png、gif結尾的所有圖片檔案
            test:/\.(jpg|png|gif)$/,
            use:{
                loader:'url-loader',
                options:{//placeholder 佔位符 
                name:'[name]_[hash].[ext]',//保持原圖片的名字+hash值和字尾,主要單引號
                outputPath:'image/',//打包圖片的位置
                limit:2048
            }
        }]
    }
}
複製程式碼

打包樣式css檔案

需要使用css-loader、style-loader

  • css-loader:分析幾個css檔案的關係,合併css檔案
  • style-loader:將css-loader合併的css內容掛載在頁面的head部分

實現方式：

  • 安裝loader實現：npm install css-loader style-loader -D
  • 在webpack.config.js中新增loader的配置
module.exports = {
    module: {
        rules: [{//打包css檔案
            test:/\.css$/,
            use:['style-loader','css-loader']
        }]
    }
}
複製程式碼

打包樣式scss檔案

需要使用sass-loader、node-sass

  • 安裝loader實現：npm install sass-loader node-sass -D
  • 在webpack.config.js中新增loader的配置
module.exports = {
    module: {
        rules: [{
            test: /\.scss$/,
            use:['style-loader','css-loader','sass-loader'] 
        }]
    }
};

複製程式碼

在配置中，有三個loader,執行順序是從下到上，從右到左。在打包scss檔案時，首先執行sass-loader：對sass翻譯成css檔案，在掛載到css-loader,最後style-loader.

為樣式新增不同瀏覽器的字首

為了相容不同的瀏覽器，在寫樣式的時候需要加上適用不同瀏覽器的字首，如-o、-webkit、-moz等

-安裝loader實現：npm install postcss-loader autoprefixer -D -在根目錄建立postcss.config.js

moudle.exports ={
	plugins:[
        require('autoprefixer')
	]
}
複製程式碼
  • 在webpack.config.js中新增loader的配置
module.exports = {
    module: {
        rules: [{
            test:/\.scss$/,
            use:[
            'style-loader',
            'css-loader',
            'sass-loader',
            'postcss-loader']
        }]
    }
}
複製程式碼

css-loader新增不同的配置

css模組化打包
  • 場景：在檔案引入的scss不僅影響當前的檔案，還影響當前檔案引入的其他js檔案，造成樣式衝突
  • 實現：css只在當前模組類有效,在配置中新增modules:true開啟css的模組化打包，在引入的時候注意區分
scss檔案的巢狀引用

  • 場景：scss檔案通過import引入其他scss檔案，導致打包的時候引入的scss檔案打包錯誤

  • 實現：importLoader:2

  • 在webpack.config.js中新增loader的配置

module:{
        rules:[{//打包scss檔案
            test:/\.scss$/,
            use:[
            'style-loader',
            {
                loader:'css-loader',
                options:{
                    importLoaders:2,//index.scss中通過import引入其他的scss檔案,引入的scss檔案在打包的時候也將依次經過所有的loader
                    modules:true 
                }
            },
            'sass-loader',
            'postcss-loader']
        }]
    }
複製程式碼

打包字型圖示檔案

在阿里巴巴向量圖示庫中，把需要的字型圖示下載到本地，解壓。將iconfont.eot iconfont.svg iconfont.ttf iconfont.woff 四種圖片檔案放入到專案中，在src中新建一個放字型圖示的資料夾font。將iconfont.css檔案拷貝到專案中，修改對應字型的引用路徑。

  • 需要安裝 file-loader:npm i file-loader -D
  • 在webpack.config.js中新增loader的配置
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.(eot|ttf|svg|woff)$/,
            use:{
                loader:'file-loader'
            }
        },
            ]
        }]
    }
}
複製程式碼

打包資料檔案

如遇到json、scv、xml檔案需要打包時，使用csv-loader 和 xml-loader實現。

  • 安裝：npm install csv-loader xml-loader -D
  • 在webpack.config.js中新增loader的配置
  module.exports = {
    module: {
      rules: [{
         test: /\.(csv|tsv)$/,
         use: [
           'csv-loader'
         ]
       },
       {
         test: /\.xml$/,
         use: [
           'xml-loader'
         ]
       }]
    }
  }
複製程式碼

相關文章