寫在前面

webpack 的 loader 和 plugin 太多了，在專案開發過程中可以根據功能需要去 webpack 官網搜尋配置。

這裡只介紹自己目前用到的，以後會繼續補充。

1. 引入 scss

scss 是 sass 語言的另個語法，詳細可見 Sass簡介

引入 scss 的方法詳細見官網 sass-loader 或 github

sass-loader 的內部實現肯定依賴 sass ，所以安裝 sass-loader 的同時也要安裝 sass

安裝 sass 和 sass-loader

yarn add sass-loader sass --dev   // 使用預設配置就行，當前預設配置就是 dart-sass

yarn add sass-loader dart-sass --dev  // 使用 dart-sass 時要有一些配置

yarn add sass-loader node-sass --dev  //不推薦使用 node-sass，會有一些問題
 

使用 sass 的配置資訊：

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
};

使用 dart-sass 的配置資訊，node-sass 同理

module: {
    rules: [
    {
        test: /\.s[ac]ss$/i,
        use: [
            'style-loader',
            'css-loader',
            {
                loader: 'sass-loader',
                options: {
                    implementation: require('dart-sass'),
                },
            },
        ],
    },
],
 

2. 引入 less

less-loader 的內部實現肯定依賴 less ，所以安裝 less-loader 的同時也要安裝 less

安裝 less 和 less-loader

yarn add less less-loader --dev

配置資訊

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

3. 引入 stylus

安裝 stylus 和 stylus-loader

yarn add stylus stylus-loader --dev

配置資訊

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

通過上述三種 css 語言的變種的引入可以看出，都是需要先將其轉化為 css，再由 css 轉化為 <style> 或抽離成 css 檔案。

4. 引入圖片

由於我們使用 webpack 開發專案時，程式碼編輯目錄和執行程式碼目錄是兩個完全獨立的資料夾，因此，在使用圖片資源時，不能直接使用相對路徑，會出錯。需要對圖片進行轉化，得到其在打包後的真正相對路徑和帶有 hash 的檔名。

file-loader 的作用就是將檔案變成檔案路徑。

安裝 file-loader

yarn add file-loader --dev

配置資訊

module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif)$/i,
                use: ['file-loader'],
            },
        ]
}

5. webpack 懶載入

在 webpack 中，模組的匯入匯出使用的是 import 和 export。但是如果將所有的模組在一開始就全都 import 進來，會大大降級頁面的載入速度。因此懶載入就是在模組需要的時候才加載出來，使用的是 import()函式。

import() 函式接收一個載入模組的路徑，返回一個 Promise 物件。

lazy.js

export default function () {
    console.log('我是懶載入')
}

index.js

button.onclick = ()=>{
    import('./lazy.js').then((module)=>{
        module.default()
    })
}