webpack4入門筆記——loader

前往懸崖下尋寶的神三算จุ๊บ發表於2018-05-07
Web筆記

什麼是loader

類似gulp中的taskes，即任務

webpack除了主營JS，還可以對指定的檔案進行統一處理，比如把typescript轉換為js，js內匯入css等

這些任務都需要安裝對應的依賴，且在module.rules配置項中配置（其他方式忽略）

{
    module: {
        rules: [
            //任務配置
            {
                test:regex,//正則,匹配檔案規則
                exclude:regex,//正則,不包含的資料夾
                use:[//使用到的loaders及其配置
                    {//某個loader
                        loader:'xx',
                        options:{}
                    }
                ]
            }
        ]
    }
}
複製程式碼

以下列舉一些常常做的任務

css打包

html中不需要引入css檔案，通過js間接的獲取樣式，這樣整個html只需要引入一個js檔案即可。

  • 使用 css-loader 可以在js中直接匯入css檔案，並在打包時把樣式也打包在output檔案中

    //比如，其中indexcss名稱任意
import indexcss from './index.css';
複製程式碼

    在js中使用方式：className直接寫名稱即可（在引入的檔案類）

    如何解決引入多個css重名問題？

  • 使用 style-loader 把js中的樣式輸入到html中的 <style> 標籤內

1 . 安裝依賴包

cnpm install style-loader css-loader --save-dev
複製程式碼

2 . 配置

module: {
    rules: [{
        test: /\.css$/,
        use: [{ 
            loader: "style-loader" 
        },{ 
            loader: "css-loader" 
        }]
        //簡寫
        //use:["style-loader","css-loader"]
    }]
}
複製程式碼

注：options不存在時可簡寫成陣列，注意loader引入的 順序

貼測試配置圖：

webpack4入門筆記——loader

postcss

postcss 是對css的擴充套件，允許使用下一代 CSS 語法，編譯後轉換成正常的css且會自動加上字首

配和 autoprefixer 使用（why?）

1 . 安裝

cnpm i  postcss-cssnext autoprefixer --save-dev
複製程式碼

2 . 配置

rules: [
    {
        // 使用 PostCSS 處理 CSS 檔案
        test: /\.css/,
        use: ['style-loader', 'css-loader', 'postcss-loader'],
    },
]   
複製程式碼

注意：postcss-loader 應該先執行，再執行 css-loader (倒序)

3 . 建立配置檔案 postcss.config.js

module.exports = {
    plugins: {
        'autoprefixer': {
            browsers: 'last 5 version' // 代表意思為每個主流瀏覽器的最後5個版本
        }
    }
}
複製程式碼

less

處理less檔案，一般和上面的css-loader style-loader一起使用

1 . 安裝依賴包

cnpm install less-loader less --save-dev
複製程式碼

2 . 配置

在上面的use加入

{loader: "less-loader"}
複製程式碼

注：注意順序，鏈式呼叫，放在最後

圖片移動和打包

css既然都放在js中了，為什麼圖片不可以呢？

  • file-loader

    css打包會導致個問題：寫background圖片路徑可能是按照css檔案相對路徑計算的，那麼打包進js後值未改變，會導致路徑錯誤。（還有什麼地方用到？）

    file-loader 解決了這個問題：它把都圖片移動到指定的位置，並修改url

    另外，也允許使用import匯入圖片，被計算出正確的路徑，後續使用這個路徑作為圖片的正確路徑

    import banner1 from "../../images/banner1.jpg";
<img src={banner1} />
複製程式碼

  • url-loader

    它把一部分圖片轉換為base64編碼打包進js中，實際上是對file-loader的上層封裝（但不依賴，內建file-loader）

    注：雖然不依賴，但是圖片import還需要它，url-loader只轉編碼

1 . 安裝依賴包

cnpm install url-loader file-loader --save-dev
複製程式碼

2 . 配置

{
    test: /\.(png|jpg|gif)$/,
    use: [{ 
        loader: "url-loader",
        options:{
            limit: 8192, //單位byte，小於8KB的圖片都會被編碼(base64)放打包在js中
            name: 'images/[name].[ext]' //圖片複製到指定位置
        }
    }]
}
複製程式碼

貼測試配置圖：

webpack4入門筆記——loader

img1.jpg（小於8kb）和img2.jpg（大）

打包後img1被打包進了js裡，img2由於超過指定大小被複制到了指定位置 且 background中的url路徑被更改

webpack4入門筆記——loader

ES6轉ES5 ES3

babel-loader 它把ES6轉換成低版本的js程式碼以在低版本瀏覽器中執行（大部分瀏覽器不能完全支援es6）

1 . 安裝依賴包

cnpm install babel-loader babel-core babel-preset-env --save-dev
複製程式碼

2 . 配置

{
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,//只是節約打包時間，這些資料夾內的js不會babal處理
    use: {
        loader: 'babel-loader',
        options: {
        	presets: ['env']
        }
    }
}
複製程式碼

支援React

1 . 額外依賴包

cnpm install babel-preset-react --save-dev
複製程式碼

附react安裝

cnpm install react react-dom --save
複製程式碼
  1. 額外配置

preset中加入react

presets: ['env','react']
複製程式碼

相關文章